您现在的位置:首页 >> 前端 >> 内容

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

时间:2017/4/18 9:49:00 点击:

  核心提示:浅谈事件冒泡和事件捕获的应用场景事件代理/事件委托:采用事件代理,为页面中的所有a标签绑定click事件。document.addEventListener(click, function(e) { ...

浅谈事件冒泡和事件捕获的应用场景——事件代理/事件委托:采用事件代理,为页面中的所有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);


 

作者:网络 来源:筱葭的博客