Javascript事件传播流程

最新推荐文章于 2025-04-03 10:48:22 发布

原创最新推荐文章于 2025-04-03 10:48:22 发布 · 282 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨了事件传播的三个阶段：捕获、目标和冒泡，并对比了DOM0级和DOM2级事件处理的区别。详细解析了不同浏览器对事件流的支持情况，以及如何通过封装方法实现跨浏览器的事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件传播的三个过程：

 <div class="max">
		max
  	<div class="min">
  		min
   	</div>
</div>
  <script type="text/javascript">
    var oParent=document.getElementsByClassName("max")[0];
    var oChild=document.getElementsByClassName("min")[0];
    oParent.oclick=function(){
      console.log("parent");
    }
    oParent.onclick=function(){
      console.log("parent-2");
    }
    oChild.onclick=function(){
      console.log("chlid");
    }
  </script>

1、事件捕获阶段:
由远及近逐渐靠近事件目标
2、处于目标阶段；
3、事件冒泡阶段；
由事件目标逐渐向上冒泡
运行上面代码得出来：
在这里插入图片描述
上面是Dom0级事件，一个元素相同的事件只能绑定一次如，并且绑定的是最后绑定的那个事件并且会覆盖掉前面的内容，在Dom0级事件里只有事件冒泡没有事件捕获。

来看一下Dom二级事件

  oParent.addEventListener("click",function(){
      console.log("parent");
    },false);
    oParent.addEventListener("click",function(){
      console.log("parent-2");
    },false);
    oChild.addEventListener("click",function(){
      console.log("chlid");
    },false);

输出结果是这样的
在这里插入图片描述
很明显可以看出来Dom2级事件是支持添加同名事件并且按照先后顺序执行
Dom2里的addEventListener是添加事件监听的写法，它可以接受三个参数，第一个参数是事件名称，第二个是事件处理函数，第三个参数是布尔值true是设置事件捕获，false是设置事件冒泡，默认情况下是false。
但IE低版本并不这么认为
解释前先让大家认识一下事件流，看过之后相信大家会明白的，请往下看

事件流

JS事件流最早要从IE和网景公司的浏览器大战说起，IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的
IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。

为了解决和IE的兼容问题同城会将两种写法封装成一个函数进行调用，因为IE不支持事件捕获，所以尽量使用事件冒泡以解决兼容问题。

下面是封装的方法供大家参考

var eventHandler={
            addEventHandler:function(ele,type,handler,capture){
                if(ele.addEventListener){
                    ele.addEventListener(type,handler,capture);
                }else if(ele.attachEvent){
                    //ie下是需要加on的
                    //ele.attachEvent(type,handler);
                    ele.attachEvent('on'+type,handler);
                }else{
                    ele['on'+type]=handler;
                }
            },
            stopPropagation:function(event){
                event=event||window.event;
                if(event.stopPropagation){
                    event.stopPropagation();
                }else{
                    event.cancelBubble=true;
                }
            },
            preventDefault:function(event){
                event=event||window.event;
                if(event.preventDefault){
                    event.preventDefault();
                }else{
                    event.returnValue=true;
                }
            }
        }