1.概念
事件委托,又名事件代理。事件委托就是利用事件冒泡,就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡,那么委托也就没法实现了。
使用事件委托的好处
1.提高性能
2.减少了事件绑定
3.从而减少内存占用
可以实现当新增子对象时无需再次对其绑定(动态绑定事件)
假设列表项li就几个,我们给每个列表项都绑定了事件;在很多时候,我们需要用户操作动态的增加或者删除列表项li元素,那么在每一次改变的时候都需要重新给新增的元素绑定事件,给即将删去的元素解绑事件;如果用了事件委托就没有这种麻烦了,因为事件是绑定在父层的,和目标元素的增减是没有关系的,执行到目标元素是在真正响应执行事件函数的过程中去匹配的;所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。
2.事件委托的实现
<ul id = 'ulid' onclick='clickfunc()'>
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
<li>第4个li</li>
<li>第5个li</li>
</ul>
function clickfunc(ev) {
var ev = ev || window.event;
var oLi = ev.srcElement || ev.target;
if(oLi.nodeName.toLowerCase() == 'li'){
alert(oLi.innerText)
}
}