JavaScript事件冒泡和捕获模式

最新推荐文章于 2022-12-15 11:41:52 发布

web前端开发V

最新推荐文章于 2022-12-15 11:41:52 发布

阅读量407

点赞数 1

文章标签： js javascript dom event vue

捕获模式

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>

冒泡模式

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>

取消冒泡

// 取消冒泡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>