原生JS中的事件委托target

事件委托

  • 事件委派是利用冒泡,通过委派可以减少事件绑定的次数,提高程序的性能;
  • 将事件统一绑定给元素共同的祖先元素,这样当后代元素上的事件触发时,就会一致冒泡到祖先元素,从而通过祖先元素的响应函数来触发事件。
    例如:我们点击按钮,新增一个便签时,会无法为新添加的标签绑定事件
<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 = "新的超链接"
	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("执行超链接");
	}
}

你可能感兴趣的:(原生JS中的事件委托target)