先看一個完整的演示頁面代碼。
Code
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>JavaScript addEventListener</title>
<style>
.header-container ul {
padding: 40px;
background-color: #eee;
}
.header-container li {
padding: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<header class="header-container" id="header">
<nav>
<ul>
<li><a href="#">nav ul li a</a></li>
</ul>
</nav>
</header>
<script>
const header = document.getElementById('header'),
ul = header.querySelector('ul'),
li = header.querySelector('li'),
useCapture = true;
ul.addEventListener('click', function() {
console.log(useCapture, 'ul');
}, useCapture);
li.addEventListener('click', function() {
console.log(useCapture, 'li');
}, useCapture);
</script>
</body>
</html>
結果
1. useCapture: false（默認值也是false）
輸出：
true "ul"
true "li"
2. useCapture: true
輸出：
true "li"
true "ul"
語法
MDN（Mozilla Developer Network）
useCapture 可選
Boolean，是指在DOM樹中，注冊了該listener的元素，是否會先於它下方的任何事件目標，接收到該事件。沿着DOM樹向上冒泡的事件不會觸發被指定為use capture（也就是設為true）的listener。當一個元素嵌套了另一個元素，兩個元素都對同一個事件注冊了一個處理函數時，所發生的事件冒泡和事件捕獲是兩種不同的事件傳播方式。事件傳播模式決定了元素以哪個順序接收事件。進一步的解釋可以查看 事件流 及 JavaScript Event order 文檔。 如果沒有指定， useCapture 默認為 false 。
Othree
useCapture 這個參數就是在控制這時候兩個 click 事件的先後順序。如果是 false ，那就會使用 bubbling，他是從內而外的流程，如果是 true，那就是 capture，和 bubbling 相反是由外而內。capture 和 bubbling，兩個檔案只有差在此一參數不同，可以發現事件的發生順序不一樣了。
總(bai)結(hua)
useCapture參數默認為false，事件執行順序為 事件冒泡bubbling（由內向外），即本示例中順序是li → ul；useCapture值為true，事件執行順序為事件捕捉capturing（由外向內），即本示例中順序是ul → li。
事件捕捉與冒泡：http://javascript.info/bubbling-and-capturing
來源/參考
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
https://blog.othree.net/log/2007/02/06/third-argument-of-addeventlistener/
轉載請注明出處：http://blog.givebest.cn/javascript/2017/08/01/javascript-addEventListener-third-parameter.html