一、什么是事件委托
事件委托也叫事件代理,就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。网上有个经典栗子,取快递来解释事件委托原理:
有三个同事预计在周一收到快递,有两个办法签收快递,一是三个人一起在公司门口等快递;二是委托给前台MM代为签收。现实中,我们大都采用第二种办法,前天MM收到快递后,会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。即使公司来了新员工(不管多少),前台MM也会核实身份后代为签收。
主要有两个含义:
- 委托前台MM和可以的,现有DOM节点是有事件的。
- 新员工也可以被前台MM代为签收,即新添加DOM也是有事件的。
二、为什么使用事件代理
节省内存,提高性能
三、事件委托的原理
事件委托是利用事件的冒泡原理来实现的,事件从最开始的节点向上传播事件。
四、事件委托的实现
1.经典的ul,li栗子
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
<script>
document.getElementById("parent-list").addEventListener("click",function(e){
if(e.target && e.target.nodeName == "LI" ){//nodeName大写
console.log("List Item",e.target.id,"clicked");
}
})
</script>
文章参考:凌云之翼
五、jQuery中的事件委托
主要有几种方法:
- $.on
$('.parent').on('click','a',function(){
console.log('click')
})
//parent元素下的a标签事件代理到$('.parent')上,然后响应事件
- $.delegte
$('.parent').delegate('a','click',function(){
console.log('click')
})
- $.live 同上,目前已废除