为什么在使用事件冒泡时不调用无效事件的事件侦听器？答案

【问题标题】：Why is the event listener for the invalid event not being called when using event bubbling?为什么在使用事件冒泡时不调用无效事件的事件侦听器？
【发布时间】：2013-08-27 10:23:37
【问题描述】：

当我尝试将事件侦听器添加到文档的无效事件时，当我像这样使用默认事件冒泡时，它不会被调用。

document.addEventListener("invalid", function (e) {
    console.log(e.target);
}, false);

当我将最后一个参数设置为true 时，事件侦听器会按预期调用。感谢What is event bubbling and capturing? 我想我理解事件捕获和冒泡之间的区别，但我不明白这如何适用于我的案例。为什么它在这里有所作为？

【问题讨论】：

你是如何触发事件的？提供一个完整简化的测试用例很有用。
我创建了一个例子：jsfiddle.net/urbaindepuce/52usS

标签： javascript javascript-events

【解决方案1】：

根据the MDN reference，这通常是准确的，在这种情况下似乎与现实相符，invalid 事件不会冒泡。他们只对the input and the form开火。

【讨论】：

谢谢。我现在有点困惑。请参阅我作为对我的问题的评论发布的 jsFiddle。当我以相同的方式将事件侦听器添加到文本框而不是文档时，它会起作用。当事件没有冒泡时，我必须在捕获阶段捕获它，对吗？但是为什么这个例子会起作用呢？ jsfiddle.net/urbaindepuce/jMExZ
因为事件在输入上触发并且您正在监听输入。不涉及冒泡（即当事件向上传递到沿途每个元素触发的 DOM 树时）。
所以当我将事件侦听器添加到文档时，如果启用冒泡，它会从目标（无效控件）冒泡到文档吗？我首先认为将侦听器附加到文档时不会冒泡，因为它已经是最顶层的元素。这就是为什么我不明白。事件是否总是从 e.target 向上冒泡或向下捕获到事件侦听器所附加到的元素？
仅在输入上，而不是在 <form> 元素上（如您回答的最后一句话中所述）。 Example。 HTMLFormElement events