前言
事件委托浅谈,js界里很火热的一项技术应该就有‘事件委托(event delegation)’了,什么是事件委托呢?我的理解是这样的,想给子元素添加事件反而添加到父元素的身上,当然这个认识十分浅显哈。接下来就说说具体应用场景。
(1)考虑一个ul,在li的数量非常少的时候,为每一个li添加事件当然会使用for循环;但是数量多的时候这样做太浪费内存,长到上百上千上万的时候,为每个li添加事件就会对页面性能产生很大的影响。
(2)给一个ul里面的几个li添加了事件但是如果动态又生成了li则刚生成的li不具备事件这时就需要用到委托。
在js中,添加到页面上的事件处理程序的多少将直接关系到页面运行的整体性能,因为需要不断的与dom节点进行交互,访问dom次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间。
这就是性能优化,减少dom操作的原因;
如果采用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只交互一次,这样减少了dom交互次数,性能就会提升;
事件委托原理
事件委托就是利用事件冒泡原理实现的!
事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件;
例:页面上有一个节点树,div > ul > li > a
比如给最里面的a 加一个click 事件,那么事件就会一层一层的往外执行,执行顺序 a > li > ul > div, 有这样一个机制,当我们给最外层的div 添加点击事件,那么里面的ul , li , a 做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托他们父集代为执行事件;
<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body>
$(function () { $("ul").on("click","li",function () { alert(1); }) });
以上代码就是事件委托的实现。。。。今天就到这里吧,,噢耶~