JavaScript addEventListener 第三個參數

時間 2019-12-10

標籤 javascript addeventlistener 三個參數欄目 JavaScript 简体版

原文原文鏈接

先看一個完整的演示頁面代碼。javascript

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）

輸出：html

true "ul"
true "li"

2. useCapture: true

輸出：java

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，兩個檔案只有差在此一參數不一樣，能夠發現事件的發生順序不一樣了。.net

總(bai)結(hua)

useCapture 參數默認爲 false，事件執行順序爲事件冒泡 bubbling （由內向外），即本示例中順序是 li → ul；useCapture 值爲 true，事件執行順序爲事件捕捉 capturing （由外向內），即本示例中順序是 ul → li。scala

事件捕捉與冒泡：http://javascript.info/bubbling-and-capturingcode