什么是事件委托？

最新推荐文章于 2024-05-06 20:29:36 发布

原创最新推荐文章于 2024-05-06 20:29:36 发布 · 1.4w 阅读

12 ·

CC 4.0 BY-SA版权

本文详细解释了事件委托的概念及其工作原理，包括如何利用事件冒泡机制实现事件处理的优化，介绍了不同浏览器间的事件兼容性问题及解决方法。

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

什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件

原理: 利用冒泡的原理，把事件加到父级上，触发执行效果。

target 事件属性可返回事件的目标节点（触发 该事件的节点） // Firefox/Chrome/Opera/Safari

srcElement 事件属性可返回事件的目标节点（触发该事件的节点）// ie
兼容问题：

oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeeName.toLowerCase() == "li"){
        target.style.background = "red";
    }
}

DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。

无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播，它就像一跟引线，只有通过引线才能将绑在引线上的鞭炮（事件监听器）引爆，试想一下，如果引线不导火了，那鞭炮就只有一响了！！！

事件冒泡和时间捕捉：

上述代码给child和parent元素都设置了点击事件，并且都是采用的事件冒泡机制。
1.当点击child元素时，先触发child的点击事件，再触发parent的点击事件，打印相应的内容；
2.当点击parent元素时，只触发parent的点击事件，因为parent元素冒泡上去没有dom元素设置了click事件的函数；

阻止冒泡事件：

方法：
	stopPropagation()阻止事件播；//Firefox/Chrome/Opera/Safari
	cancelBubble = true 阻止事件传播； // ie

阻止冒泡兼容处理：
function stopPropagation(e){
    e = e || window.event;
    if(e.stopPropagaton){
        // Firefox/Chrome/Opera/Safari
        e.stopPropagation();
    }else{
        e.cancelBubble = true; //ie
    }
}

阻止浏览器默认行为

方法

preventDefault() //Firefox/Chrome/Opera/Safari

returnValue = false //ie

兼容处理：
function stopPropagation(e){
    e = e || window.event;
    if(e.preventDefault){
        // Firefox/Chrome/Opera/Safari
        
    }else{
        e.returnValue = false; //ie
    }
    
}