事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。
我们有下面的一个场景:当点击li输出相应的值
|
1
2
3
4
5
6
7
|
<ul class="list-item">
<li class="item">1
</li>
<li class="item">2
</li>
<li class="item">3
</li>
<li class="item">4
</li>
</ul>
|
我们可以这样写
|
1
2
3
4
5
6
7
8
|
var itemDom =
document.getElementByClass(
"item")
for(
var i=
0, l = itemDom.length; i < l; i++){
this.addEventListener(
"click",
function{
//TODO
});
}
|
其实这里面就有一个问题，如果li少的话都还行，如果有成千上万条的话就非常的占用性能
我们根据dom的冒泡性质可以这样修改，将事件绑定在ul上，并通过e.target去处理目标节点
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
document.getElementsByClassName(
"list-item")[
0].addEventListener(
"click",
function(e) {
// 检查事件源e.targe是否为Li
if(e.target && e.target.nodeName ==
"LI") {
console.log(e.target.innerText)
}
});
//juqery
$(
'.list-item').on(
'click',
'.item',
function() {
alert($(
this).text())
})
|
在ie下面我们要使用e.srcElement来获取事件源，srcElement.tagName能够捕获活动标记名称