事件处理程序和侦听器&事件冒泡和事件捕获
我对JavaScript中的“事件侦听器”、“事件处理程序”、“事件冒泡”和“事件捕获”感到困惑。
我在网上搜索过，也看过不同的网站，但是，我仍然很难理解一些不同的地方，甚至基本情况。
正如这篇文章所建议的，事件处理程序是创建并侦听事件的。
- 这是否意味着，附加到DOM中的元素的JavaScript函数不是事件处理程序，而是事件侦听器？
另外，这里我发现了“事件冒泡”和“事件捕获”之间的区别。另外，我在不久前读到，在道场中，所有事件都是由<body>标记捕获的。
- 这是否意味着DOM中的其余元素没有附加JavaScript？
- 更准确地说，如果一个事件要通过“事件冒泡”由父级处理，那么不需要向子节点添加侦听器吗？
这些术语背后的确切定义是什么？
回答 1
Stack Overflow用户
发布于 2015-09-13 01:12:19
事件处理程序/事件侦听器
事件侦听器和事件处理程序之间没有什么区别--出于所有实际目的，它们是同一回事。但是，以不同的方式看待这些问题可能会有所帮助：
我可以定义一个“处理程序”..。
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元素可以嵌套(当然)。事件首先从最外层的父级捕获到最内部的子级，然后从最内部的子级捕获到最外层的父级。
您可能已经注意到，在我前面的示例中，附加到elementB的侦听器有一个附加的参数-- true --它不会传递给elementA。这告诉侦听器在捕获阶段响应事件，而默认情况下它会在气泡阶段响应。在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'，你会看到一个警告框‘2’，后面跟着一个警告框‘1’(因为‘2’在捕获阶段首先被触发，'ONE‘在气泡阶段返回的过程中被触发)
如果您单击“3”，您将看到一个警报框‘2’(捕获)，后面是警报框'3‘(冒泡)，后面是警报框’1‘(冒泡)。
像泥一样干净，对吧？
https://stackoverflow.com/questions/32544958
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号