什么是事件委托?

您所在的位置:网站首页 js委托事件代码是什么意思啊 什么是事件委托?

什么是事件委托?

2024-07-09 12:21| 来源: 网络整理| 查看: 265

什么是事件委托:通俗的讲,事件就是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 } }


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3