当前位置: 首页 > Web前端 > HTML

我对JavaScript事件委托的理解

时间:2023-04-02 13:00:55 HTML

初学C#的时候,在学习委托这个概念的时候,有点不知所措。下班后用了很多,发现真的很好用。JavaScript中也有事件委托的概念,那么在JavaScript中,事件委托的原理是什么,应用场景有哪些呢?事件委托的原理事件委托,通俗的说,就是委托一个元素的功能来响应一个事件(点击,按键按下……)技术用的比较好。1:事件冒泡,可以在父元素中监听子元素触发的事件。2:DOM遍历,一个父元素包含太多的子元素,那么触发事件的时候,是不是触发了某类元素?这是事件委托的两个核心,也是事件委托相关的技术要点。如果遇到什么问题,可以从这两点切入,寻找解决办法。再说说事件的冒泡。我们可以在document.addEventListener的时候设置事件模型:事件冒泡,事件捕获,一般来说都是使用事件冒泡模型。事件委托的优缺点优点减少内存消耗动态绑定事件缺点1消耗性能事件委托应用使用jQuery$("parentlabel").delegate("childlabel","click",function(){vartarget=$(event.target);console.log(target);});或者新版本的$("parentlabel").on("click","childlabel",function(){vartarget=$(event.target);console.log(target);});NativeJavaScriptdocument.getElementById('parentlabel').addEventListener('click',function(e){//兼容性处理varevent=e||window.event;vartarget=event.target||event.srcElement;if(target.nodeName.toLocaleLowerCase==='sub-label'){console.log('节点是:',target.innerHTML);}});other注意事项可能有多个对象需要委托parent,和events需要一一绑定;需要绑定的事件类型可能有多种,需要逐一绑定事件;执行绑定函数时,需要传入正确的参数,并考虑到this关键字的问题;**另外,事件委托也有一定的局限性;比如focus,blur这些事件没有事件冒泡机制,所以不能委托绑定事件;而mousemove,mouseout鼠标操作等事件,虽然有事件冒泡,但目前的解决方案是通过position不断计算位置,比较耗性能,所以不适合事件委托;**