事件的捕获

最新推荐文章于 2023-07-13 11:46:30 发布

wuyan_xingchen

最新推荐文章于 2023-07-13 11:46:30 发布

阅读量214

点赞数

文章标签： js css html

本文链接：https://blog.csdn.net/wuyan_xingchen/article/details/106585009

版权

点击跳转上一篇的事件冒泡
继续上一篇的内容说一下什么是事件捕获

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="demo" style="width: 300px; height: 300px; background: blue;">
      <div id="demo1" style="width: 200px; height: 200px; background: red;">
        <div id="demo2"style="width: 100px; height: 100px; background: yellow;">
          333  
        </div>
        222
      </div>
      111
    </div>
    <script>
      let demo = document.querySelector("#demo");
      let demo1 = document.querySelector("#demo1");
      let demo2 = document.querySelector("#demo2");
      demo.addEventListener('click',function(){//第三个参数为true时事件捕获从外往里
        console.log(111);
      },true)
      demo1.addEventListener('click',function(){
        console.log(222);
      },true)
      demo2.addEventListener('click',function(){
        console.log(333);
      },true)
    </script>
  </body>
</html>

正常这种情况下你要是不阻止事件冒泡它的打印结果应该是333 222 111从里往外依次触发，但是这里我们用了addEventListener它一共有三个参数其实，上次只写了常用的前两个，他还有第三个参数是布尔值，当第三个参数为true时就会触发其自带的事件捕获效果，改变执行的顺序，从外往里执行捕获。现在他的打印结果应该是111 222 333，而且你也可以使用 e.stopPropagation();阻止事件捕获的进行。

wuyan_xingchen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件的捕获

点击跳转上一篇的事件冒泡继续上一篇的内容说一下什么是事件捕获<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <
复制链接

扫一扫