原生JS中的事件委托target

最新推荐文章于 2024-09-11 11:05:48 发布

proxy_

最新推荐文章于 2024-09-11 11:05:48 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/proxy_/article/details/99774084

版权

事件委托

事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能；
将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，就会一致冒泡到祖先元素，从而通过祖先元素的响应函数来触发事件。
例如：我们点击按钮，新增一个便签时，会无法为新添加的标签绑定事件

<body>
<button >添加超链接</button>
<ul id="ul">
	<li><a href="javascript:;" class="link">超链接一</a></li>
	<li><a href="javascript:;" class="link">超链接二</a></li>
	<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
</body>

<script>
document.querySelector('button').onclick = function(){
	var li = document.createElement("li");
	li.innerHTML = "<a href='javascript:;' class='link'>新的超链接</a>"
	ul.appendChild(li);
}
</script>

此时只能为页面中已有的 li 标签绑定响应事件，但是新增的 li 标签就无法被绑定上任何事件。所以可以利用 js 中的事件委托来解决。将响应事件委托给所有 li
的共同父元素 ul ，事件触发的对象指向 li

document.querySelector('ul').onclick = function(event){
	event = event || window.event;
	//event中的target表示事件触发的对象
	//如果触发事件的对象是需要的元素则执行，否则不执行
	if(event.target.className === "link"){
		alert("执行超链接");
	}
}