欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js事件捕获冒泡

程序员文章站 2022-07-14 09:30:01
...

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

 

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

 

js事件捕获冒泡
            
    
    博客分类: web js事件捕获冒泡 
 四个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没有捕获冒泡区分,指定冒泡阶段的函数在指定捕获阶段的函数先执行了。执行顺序不确定

 

 

  • js事件捕获冒泡
            
    
    博客分类: web js事件捕获冒泡 
  • 大小: 765 Bytes