我对 JavaScript 中的“事件监听器”、“事件处理程序”、“事件冒泡”和“事件捕获”感到困惑。
我在互联网上搜索并查看了不同的网站，但是，我仍然无法理解一些差异，甚至基本条件。
如this article表明，事件处理程序已创建并监听事件。
- 这是否意味着，附加到 DOM 内部元素的 JavaScript 函数不是事件处理程序，而是事件监听器？
此外，here我发现了“事件冒泡”和“事件捕获”之间的区别。另外，我前段时间在dojo中读到过所有事件均由 <body> 捕获标签。
这是否意味着 DOM 内的其余元素没有附加 JavaScript？
更准确地说，如果父级通过“事件冒泡”处理事件，则无需为子级添加监听器，这是真的吗？
这些术语背后的准确定义是什么？
最佳答案
事件处理程序/事件监听器
事件监听器和事件处理程序之间没有区别 - 出于所有实际目的，它们是相同的东西。但是，以不同的方式思考它们可能会有所帮助:
我可以定义一个“处理程序”...
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”(因为“two”在捕获阶段首先被触发，并且在泡沫阶段期间，'one' 在返回途中被触发)
如果您点击“3”，您将看到一个警报框“二”(CAPTURED)，然后是一个警报框“三”(BUBBLED)，随后是一个警告框“ONE”(BUBBLED)。
像泥土一样清澈，对吗？
关于javascript - 事件处理程序和监听器以及事件冒泡和事件捕获，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32544958/