捕获、冒泡

最新推荐文章于 2023-11-01 10:58:14 发布

weixin_34072159

最新推荐文章于 2023-11-01 10:58:14 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/gleamer/p/10474415.html

版权

参考资料

一个DOM元素绑定多个事件时，先执行冒泡还是捕获 https://www.cnblogs.com/greatluoluo/p/5882508.html
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件。
首先，无论是冒泡事件还是捕获事件，元素都会先执行捕获阶段。

从上往下，如有捕获事件，则执行；一直向下到目标元素后，从目标元素开始向上执行冒泡元素，即第三个参数为true表示捕获阶段调用事件处理程序，如果是false则是冒泡阶段调用事件处理程序。
(在向上执行过程中，已经执行过的捕获事件不再执行，只执行冒泡事件。)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #one {
      width: 300px;
      height: 300px;
      background-color: red;
    }

    #two {
      width: 200px;
      height: 200px;
      background-color: green;
    }

    #three {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
    #four {
      width: 50px;
      height: 50px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
    <div id='one'>
      <div id='two'>
        <div id='three'>
          <div id='four'>
          </div>
        </div>
      </div>
    </div>
    <script>

     var one=document.getElementById('one');
     var two=document.getElementById('two');
     var three=document.getElementById('three');
     var four=document.getElementById('four');


    one.addEventListener('click',function(){
    console.log('one');
    },true);
    two.addEventListener('click',function(){
    console.log('two');
    },false);
    three.addEventListener('click',function(){
    console.log('three');
    },true);
    four.addEventListener('click',function(){
    console.log('four');
    },false);
    </script> 
</body>
</html>

此时点击four元素，four元素为目标元素，one为根元素祖先，从one开始向下判断执行。

one为捕获事件，输出one；

two为冒泡事件，忽略；

three为捕获时间，输出three；

four为目标元素，开始向上冒泡执行，输出four；（从此处分为两部分理解较容易。）

three为捕获已执行，忽略;

two为冒泡事件，输出two；

one为捕获已执行，忽略。

最终执行结果为：

one
three
four
two

转载于:https://www.cnblogs.com/gleamer/p/10474415.html

weixin_34072159

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
捕获、冒泡

参考资料一个DOM元素绑定多个事件时，先执行冒泡还是捕获 https://www.cnblogs.com/greatluoluo/p/5882508.htmlhttps://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 ->...
复制链接

扫一扫