JavaScript事件冒泡和捕获模式-CFANZ编程社区

JavaScript事件冒泡和捕获模式_html

捕获模式

1，addEventListener的第三个参数useCapture为true则为捕获模式
2，单击C时事件触发顺序为A-> B-> C

<!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>

JavaScript事件冒泡和捕获模式_事件触发_02

冒泡模式

1，不填充addEventListener的第三个参数为冒泡模式
2，单击C时事件触发顺序为C-> B-> A

<!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>

JavaScript事件冒泡和捕获模式_html_03

取消冒泡

// 取消冒泡
event.cancelBubble = true

1，取消冒泡后事件就不会往上层传递
2，这时只有监听C的事件被执行

<!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>

JavaScript事件冒泡和捕获模式_事件触发_04

本文完~

JavaScript事件冒泡和捕获模式_事件触发_05