了解过JS的事件机制应该知道JS的事件触发后会有一个冒泡阶段。
事件代理就是利用了这个机制。
我们考虑这样一个情况
var ulNode = document.getElementById("ulNode");
var fragment = document.createDocumentFragment();
for (let i = 0;i < 10;i++){
var liNode = document.createElement("li");
liNode.innerText = "node" + i;
liNode.addEventLinstener("click",function(event){
console.log("you click" + event.target.innerText);
});
fragment.appendChild(liNode);
}
ulNode.appendChild(fragment);
在这里我们为每一个li节点都绑定了一个点击事件，这无疑是不效率的做法。而利用冒泡机制我们可以讲事件委托给父节点ul，这样就只需要绑定一个事件。
var ulNode = document.getElementById("ulNode");
var fragment = document.createDocumentFragment();
for (let i = 0;i < 10;i++){
var liNode = document.createElement("li");
liNode.innerText = "node" + i;
fragment.appendChild(liNode);
}
ulNode.addEventLinstener("click",function(event){
if(event.target.tagName.toLowerCase() === 'li'){
console.log("you click"+event.target.innerText);
}
}
ulNode.appendChild(fragment);
