事件处理程序/事件监听器
事件侦听器和事件处理程序之间没有区别 - 出于所有实际目的，它们是相同的。但是，以不同的方式思考它们可能会有所帮助：
我可以定义一个“处理程序”...
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”（因为在 CAPTURE PHASE 期间首先触发了“two”，并且'one' 在BUBBLE PHASE的途中被触发）
如果您点击“3”，您会看到一个警告框“TWO”（CAPTURED），然后是一个警告框“THREE”（BUBBLED），后跟一个警告框“ONE”（BUBBLED）。
一清二楚对吧？