javaScript事件委托

it2022-05-05  196

什么是事件委托

事件委托也叫事件代理,通俗易懂的说就是大家都会做的同一件事,找一个专门的人来做。例如生活中的菜鸟驿站就是事件委托的角色。

事件委托给程序的好处

1. 可以减少不必要的DOM操作,这对浏览器的性能有极大的好处。 2. 不用考虑未知的节点。

代码

<ul id="nav"> <li ></li> <li ></li> <li ></li> <li ></li> </ul> <script> //通常我要想给上面的li节点绑定点击事件是这样的: var lis = document.querySelectorAll('#nav li')); for(var li of Array.from(lis)){ lis.onclick = function(){ } } //上面是我们通常的做法,其实存在着许多的问题: //第一我们给没一个li都绑定了点击事件,每次绑定都导致页面的重新渲染,这对性能是不友好的。 //第二如果在我们绑定了事件之后ul#id同过js动态生成了新的li节点,那么新的li是没有点击事件的,这个就是第二的问题所在。 //ps:下面是通过事件委托的形式 var querySelector = document.querySelector.bind(document); function event (el,eventnName,fnc){ querySelector(el).addEventListener(eventnName,function(e){ var _this = e.target; var brother = []; var childNodes = this.childNodes = Array.from(this.childNodes); arguments = Array.from(arguments); for(var el of childNodes){ (el.nodeType == 1 ) && (el.isSameNode(_this) ? false : brother.push(el);) } if(typeof fnc == 'function'){ fnc.apply(_this,[this,brother].concat(arguments)); } }) } event('#nav','click',function(el,brother,e){ // console.log(this); // console.log(el); console.log(brother); // console.log(e); }); </script>

最新回复(0)