JavaScript 事件冒泡和捕獲模式

時間 2019-12-05

原文原文鏈接

捕獲模式

1，addEventListener 的第三個參數 useCapture 爲 true 則爲捕獲模式
2，點擊 C 時事件觸發順序爲 A -> B -> Chtml

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .a {
        background: lightblue;
        padding: 50px;
      }
      .b {
        background: lightgray;
        padding: 50px;
      }
      .c {
        background: lightyellow;
        padding: 50px;
      }
    </style>
  </head>
  <body>
    <div class="a">
      A
      <div class="b">
        B
        <div class="c">
          C
        </div>
      </div>
    </div>
  </body>
  <script>
    var a = document.querySelector('.a')
    var b = document.querySelector('.b')
    var c = document.querySelector('.c')
    a.addEventListener('click', function(event){
      console.log('capture click a')
    }, true)
    b.addEventListener('click', function(event){
      console.log('capture click b')
    }, true)
    c.addEventListener('click', function(event){
      console.log('capture click c')
    }, true)
  </script>
</html>

冒泡模式

1，不填寫 addEventListener 的第三個參數爲冒泡模式
2，點擊 C 時事件觸發順序爲 C -> B -> Aspa

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .a {
        background: lightblue;
        padding: 50px;
      }
      .b {
        background: lightgray;
        padding: 50px;
      }
      .c {
        background: lightyellow;
        padding: 50px;
      }
    </style>
  </head>
  <body>
    <div class="a">
      A
      <div class="b">
        B
        <div class="c">
          C
        </div>
      </div>
    </div>
  </body>
  <script>
    var a = document.querySelector('.a')
    var b = document.querySelector('.b')
    var c = document.querySelector('.c')
    a.addEventListener('click', function(event){
      console.log('Bubble click a')
    })
    b.addEventListener('click', function(event){
      console.log('Bubble click b')
    })
    c.addEventListener('click', function(event){
      console.log('Bubble click c')
    })
  </script>
</html>

取消冒泡

// 取消冒泡
event.cancelBubble = true

1，取消冒泡後事件就不會往上層傳遞
2，這時只有監聽 C 的事件被執行code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .a {
        background: lightblue;
        padding: 50px;
      }
      .b {
        background: lightgray;
        padding: 50px;
      }
      .c {
        background: lightyellow;
        padding: 50px;
      }
    </style>
  </head>
  <body>
    <div class="a">
      A
      <div class="b">
        B
        <div class="c">
          C
        </div>
      </div>
    </div>
  </body>
  <script>
    var a = document.querySelector('.a')
    var b = document.querySelector('.b')
    var c = document.querySelector('.c')
    a.addEventListener('click', function(event){
      console.log('Bubble click a')
    })
    b.addEventListener('click', function(event){
      console.log('Bubble click b')
    })
    c.addEventListener('click', function(event){
      console.log('Bubble click c')
      event.cancelBubble = true
    })
  </script>
</html>

冒泡和捕獲的執行順序

若是同時使用冒泡和捕獲，先監聽誰就先執行誰htm

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .a {
        background: lightblue;
        padding: 50px;
      }
    </style>
  </head>
  <body>
    <div class="a">
      A
    </div>
  </body>
  <script>
    var a = document.querySelector('.a')
    a.addEventListener('click', function(event){
      console.log('capture click a')
    }, true)
    a.addEventListener('click', function(event){
      console.log('Bubble click a')
    })
  </script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。