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>