js事件捕获冒泡

事件捕获与冒泡机制探究

最新推荐文章于 2025-09-26 23:30:00 发布

原创最新推荐文章于 2025-09-26 23:30:00 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js事件 #捕获 #冒泡

web 专栏收录该内容

36 篇文章

订阅专栏

浏览器在发生一个事件时会从经过顶层到目标的捕获过程，目标到顶层的冒泡过程，不多解释，看代码理解

<html>
  <head>
    <style>
        #outer{
            width: 200px;
            height: 200px;
            background: #F08738;
        }
        #mid{
            width: 150px;
            height: 150px;
            background: #293484;
        }
        #inner{
            width: 100px;
            height: 100px;
            background: #783948;
        }
        #target{
            width: 50px;
            height: 50px;
            background: #98fe99;
        }
    </style>
  </head>  
  <body>
    <div id="outer">
      <div id="mid">
        <div id="inner">
            <div id="target"></div>
        </div>
      </div>
    </div>
    <script>
        var o = document.getElementById('outer');
        var m = document.getElementById('mid');
        var i = document.getElementById('inner');
        var t = document.getElementById('target');
    </script>
  </body>
</html>

四个div层次很清楚

下面为div绑定事件

o.addEventListener('click', function(){console.log('outer')});
m.addEventListener('click', function(){console.log('mid')});
i.addEventListener('click', function(){console.log('inner')});
t.addEventListener('click', function(){console.log('target')});

点击target的结果如下，依次输出target inner mid outer

冒泡的结果，点击target, 它父层的div的click事件也会执行

再看捕获阶段

o.addEventListener('click', function(){console.log('outer')}, true);
m.addEventListener('click', function(){console.log('mid')}, true);
i.addEventListener('click', function(){console.log('inner')}, true);
t.addEventListener('click', function(){console.log('target')}, true);

addEventListener最后加了个参数，指明此事件在捕获阶段执行，其结果是 outer mid inner target

可以看出来从顶层到目标元素的捕获阶段

捕获，冒泡一起绑定

o.addEventListener('click', function(){console.log('outer bubble')}, false);
o.addEventListener('click', function(){console.log('outer')}, true);
m.addEventListener('click', function(){console.log('mid bubble')}, false);
m.addEventListener('click', function(){console.log('mid')}, true);
i.addEventListener('click', function(){console.log('inner bubble')}, false);
i.addEventListener('click', function(){console.log('inner')}, true);
t.addEventListener('click', function(){console.log('target bubble')}, false);
t.addEventListener('click', function(){console.log('target')}, true);

点击target结果是

outer

mid

inner

target bubble

target

inner bubble

mid bubble

outer bubble

可以看到先是执行捕获阶段的函数，然后是冒泡阶段的函数

对于目标元素target没有捕获冒泡区分，指定冒泡阶段的函数在指定捕获阶段的函数先执行了。执行顺序不确定