事件处理程序和监听器以及事件冒泡和事件捕获

Question

我对 JavaScript 中的 "Event Listener"、"Event Handler"、"Event Bubbling" 和 "Event Capturing" 感到困惑。

我在网上搜索过，也看过不同的网站，但我仍然无法理解一些差异，甚至是基本情况。

如 this article 所示，事件处理程序已创建并侦听事件。

这是否意味着附加到 DOM 内元素的 JavaScript 函数不是事件处理程序，而是事件侦听器？

此外，here I found the differences between "Event bubbling" and "Event capturing". Also, I have read some time ago that in dojo 所有事件都由 <body> 标签捕获。

是不是表示DOM里面的其余元素没有附加JavaScript？
更准确地说，如果事件将由父级通过 "Event Bubbling" 处理，则不需要为子级添加侦听器，这是真的吗？

这些术语背后的准确定义是什么？

Answer 1

事件处理程序/事件侦听器

事件侦听器和事件处理程序之间没有区别 - 对于所有实际用途，它们是同一件事。但是，以不同的方式思考它们可能会有所帮助：

我可以定义一个 "handler" ...

function myHandler( e ){ alert('Event handled'); }

... 并使用 'addEventListener':

将其附加到多个元素

elementA.addEventListener( 'click', myHandler );
elementB.addEventListener( 'click', myHandler, true );

或者，我可以将 "handler" 定义为 'addEventListener' 中的闭包：

elementC.addEventListener( 'click', function( e ){ alert('Event Handled'); } );

事件捕获/事件冒泡

您可以将事件捕获视为事件冒泡的对立面——或者事件生命周期的两半。 DOM 元素可以嵌套（当然）。一个事件首先 CAPTURES 从最外层的父级到最内层的子级，然后 BUBBLES 从最内层的子级到最外层的父级。

您可能已经注意到，在我上面的示例中，附加到 elementB 的侦听器有一个附加参数 - true - 未传递给 elementA。这告诉侦听器在 CAPTURE 阶段响应事件，而默认情况下它会在 BUBBLE 阶段响应。在 jsfiddle.net:

试试这个

假设我们有 3 个嵌套的 div 元素：

<div id="one">
    1
    <div id="two">
        2
        <div id="three">
            3
        </div>
    </div>
</div>

... 我们将 'click' 处理程序附加到每个：

document.getElementById('one').addEventListener( 'click', function(){ alert('ONE'); } );
document.getElementById('two').addEventListener( 'click', function(){ alert('TWO'); }, true );
document.getElementById('three').addEventListener( 'click', function(){ alert('THREE') } );

如果单击“1”，您将看到一个警告框，其中包含文本 'ONE'。

如果单击“2”，您将看到一个警告框 'TWO'，然后是一个警告框 'ONE'（因为 'two' 在 CAPTURE PHASE，并且 'one' 在 BUBBLE PHASE)

如果单击“3”，您将看到一个警告框 'TWO' (CAPTURED)，然后是一个警告框 'THREE' (BUBBLED)，后跟一个警告框 'ONE' (BUBBLED).

清澈如泥，对吧？

事件处理程序和监听器以及事件冒泡和事件捕获

Event Handlers and Listeners & Event Bubbling and Event Capturing

javascript

jquery

events

dojo

handler