事件的委派

262 阅读1分钟

事件的委派

  • 指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。
  • 事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">添加超链接</button>
		<ul id="u1">
			<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>
		//为btn添加单击响应函数
		var btn=document.getElementById("btn");
		btn.onclick=function(){
			var li=document.createElement("li");
			li.innerHTML="<a href='javascript:;' class='link'>新建超链接</a>";
			u1.appendChild(li);
		};
		//为u1绑定一个单击响应函数
		var u1=document.getElementById("u1");
		u1.onclick=function(event){
			event=event || window.event;
			//event中的target表示的是触发事件的对象
			//如果触发事件的对象是我们期望的元素,则执行,否则不执行
			if(event.target.className=="link"){
				alert("我是u1的单击响应函数");
			}				
		};
	</script>
</html>