事件代理(Event Delegation),又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。
我们有下面的一个场景:当点击li输出相应的值
<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>
我们可以这样写
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去处理目标节点
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())
})
网友评论