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

我对JavaScript中的“事件监听器”，“事件处理程序”，“事件冒泡”和“事件捕获”感到困惑。事件处理程序和监听器和事件冒泡和事件捕获

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

由于this article暗示，事件处理程序已创建并侦听事件。

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

另外，here我发现了“事件冒泡”和“事件捕获”之间的区别。另外，我前一段时间读到dojo所有事件都被<body>标签捕获。

这是否意味着没有JavaScript附加到DOM内其余元素？
更准确地说，如果事件将由父母通过“事件冒泡”来处理，那么不需要为孩子添加侦听器吗？

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

来源

2015-09-12 Suo6613

据我所知，一个事件处理程序绑定到dom中的一个项目，并且无论dom内容是否在侦听器绑定后加载，事件侦听器都会触发 – kurt

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

有一个事件侦听器和事件处理程序没有什么区别 - 所有的实际目的，他们是同样的事情。但是，它可能有助于不同的角度思考他们：

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

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'（因为'2'在CAPTURE PHASE第一次被触发，'one'是在泡沫阶段）

如果你点击“3”，你会看到一个警告框，“两节”（俘获）期间的道路上还以颜色了，其次是一个警告框“三化”（BUBBLED），然后是一个警告框'ONE'（BUBBLED）。

清澈如泥，对不对？

来源

2015-09-13 01:12:19 Ragdata

您的意思是每当我点击任何我调用的元素处理程序连接到泡沫阶段的所有祖先？我的意思是，当这个冒泡会停止？在你的例子中，它会调用所有的处理程序，直到它到达没有附加任何东西或直到到达身体的父类为止？ – Suo6613

是的，未经检查，它会直到，激活正在监听事件的每位家长......除非您专门阻止它。如果你不想继续操作，你可以在你的处理程序中添加一个'stopPropogation'调用来阻止事件冒泡。 – Ragdata

谢谢。只是为了确认！因此，在你的例子中，如果没有处理程序附加到div＃2，当我点击div＃3时，我会看到警告框“ONE”，然后是“THREE”，因为冒泡通过没有附加处理程序的父项你也没有停止冒泡。对？ – Suo6613

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

回答

相关问题