浅谈事件冒泡和事件捕获的应用场景——事件代理/事件委托

采用事件代理，为页面中的所有a标签绑定click事件。

document.addEventListener("click", function(e) {
if (e.target.nodeName == "A")
console.log("a");
}, false);

问题：若a标签里面仍有span、img等其他元素，上述代码中，单击span、img等其他元素不能触发click事件。

原因：单击span、img等其他元素时，e.target指向的是触发click事件的元素（span、img等其他元素），而不是a标签。

解决方法：从触发click事件的元素开始，逐级向上查找，直到找到a标签为止。

document.addEventListener("click", function(e) {
var node = e.target;
while (node.parentNode.nodeName != "BODY") {
if (node.nodeName == "A") {
console.log("a");
break;
}
node = node.parentNode;
}
}, false);