什么是事件委托? |
您所在的位置:网站首页 › js委托事件代码是什么意思啊 › 什么是事件委托? |
什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件 原理: 利用冒泡的原理,把事件加到父级上,触发执行效果。 target 事件属性可返回事件的目标节点(触发 该事件的节点) // Firefox/Chrome/Opera/SafarisrcElement 事件属性可返回事件的目标节点(触发该事件的节点)// 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 |