事件处理程序/事件监听器
事件侦听器和事件处理程序之间没有区别 - 出于所有实际目的,它们是相同的东西。但是,以不同的方式思考它们可能会有所帮助:
我可以定义一个“处理程序”......
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”在捕获阶段,并且“一”在返回过程中被触发气泡相)
如果您单击“3”,您将看到一个警告框“TWO”(CAPTURED),然后是警报框“三”(BUBBLED),然后是警报框“ONE”(BUBBLED).
清澈如泥,对吧?