Question

我对＆＃34; Event Listener＆＃34;，＆＃34; Event Handler＆＃34;，＆＃34; Event Bubbling＆＃34;和＆＃34;事件捕获＆＃34;在JavaScript中。

我在互联网上搜索并查看了不同的网站但是，我仍然有一些问题需要了解一些差异，甚至是基本情况。

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

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

另外，here我发现＆＃34;事件冒泡＆＃34;之间存在差异。和＆＃34;事件捕获＆＃34;。另外，我前段时间已经阅读过dojo所有事件都被<body>标记捕获。

这是否意味着DOM中的其他元素没有附加JavaScript？
更确切地说，如果一个事件将由父母通过＆＃34;事件冒泡＆＃34;没有必要为孩子添加听众？

这些条款背后的确切定义是什么？

Answer 1

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

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

我可以定义一个“处理程序”......

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

...并使用'addEventListener'将其附加到多个元素：

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

或者，我可以将“处理程序”定义为'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>

...我们为每个人附上一个“点击”处理程序：

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'（因为在'em> CAPTURE PHASE 期间首先触发'two'，并且在“ BUBBLE PHASE ”

期间，“one”在备份的路上被触发

如果点击“3”，您会看到一个警告框“TWO”（ CAPTURED ），然后是一个警告框“THREE”（ BUBBLED ），然后是一个警告框'ONE'（ BUBBLED ）。

清楚如泥，对吧？

事件处理程序和监听器＆amp;事件冒泡和事件捕获

1 个答案: