我对JavaScript中的“Event Listener”,“Event Handler”,“Event Bubbling”和“Event Capturing”感到困惑.
我在互联网上搜索并查看了不同的网站但是,我仍然有一些问题了解一些差异甚至基本条件.
正如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>
…我们为每个附加一个’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”(因为“两个”在捕获阶段期间首先被触发,并且在返回的路上触发“一个”在泡泡阶段)
如果单击“3”,您将看到一个警告框“TWO”(CAPTURED),然后是一个警告框“THREE”(BUBBLED),然后是一个警告框“ONE”(BUBBLED).
清楚如泥,对吗?
原文地址:https://codeday.me/bug/20191007/1866495.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。