Javascript 事件冒泡捕获实验

最新推荐文章于 2024-06-22 15:02:51 发布

binggoogle

最新推荐文章于 2024-06-22 15:02:51 发布

阅读量365

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/binggoogle/article/details/50681706

版权

前端专栏收录该内容

76 篇文章 0 订阅

订阅专栏

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

IE 5.5: div -> body -> document

IE 6.0: div -> body -> html -> document

Mozilla 1.0: div -> body -> html -> document -> window

（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

实验代码：

<body>
    <div id="test" style="width:100px;height:100px;border:1px solid red">
       <div id="test2" style="width:80px;height:80px;border:1px solid red">
          <div id="test3" style="width:60px;height:60px;border:1px solid red">
             <div id="test4" style="width:40px;height:40px;border:1px solid red">
       <p id="inner">hello</p>
               </div>
           </div>
       </div>
    </div>
</body>

<script>
    var test = document.getElementById('test');
    var test2 = document.getElementById('test2');
    var test3 = document.getElementById('test3');
    var test4 = document.getElementById('test4');

   test.addEventListener('click',function(){alert('test')},true);
   test2.addEventListener('click',function(){alert('test2')},false);
   test3.addEventListener('click',function(){alert('test3')},true);
   test4.addEventListener('click',function(){alert('test4')},true);
   var inner = document.getElementById('inner');
   inner.addEventListener('click',function(){alert('inner')},false);

</script>

点击 test, 弹框 test

点击 test2, 弹框 test test2

点击 test3, 弹框 test test3 test2

点击 test4, 弹框 test test3 test4 test2

任何发生在 w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段。

无论是冒泡事件还是捕获事件，元素都会先执行捕获阶段

DOM元素绑定多个事件的执行过程。

执行次数：绑定了几个事件便执行几次。

点击three执行结果：one two,capture three,bubble two,bubble

one.addEventListener('click',function(){
alert('one');
},true);
two.addEventListener('click',function(){
alert('two,bubble');
},false);
two.addEventListener('click',function(){
alert('two,capture');
},true);
three.addEventListener('click',function(){
alert('three,bubble');
},true);
four.addEventListener('click',function(){
alert('four');
},true);

binggoogle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript 事件冒泡捕获实验

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window（2）捕获型事件(eve
复制链接

扫一扫

专栏目录