[JavaScript知识库] JavaScript-事件的委派

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript-事件的委派 -> 正文阅读

[JavaScript知识库]JavaScript-事件的委派

事件的委派
指的是将事件统一绑定给元素的共同祖先元素，这样当后代元素上的时间被触发时，会一直冒泡到祖先元素，从而通过祖先的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。
不理解的话看看下面这个小例子
代码如下（注释部分有对每行代码的解释）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件的委派</title>
	</head>
	<body>
		<button id="btn01">点这里</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>
		<script type="text/javascript">
			//为每一个按钮绑定超链接
			var ul=document.getElementById("ul");
			var btn01=document.getElementById("btn01");
			btn01.onclick=function(){
				//创建一个li
				var li=document.createElement("li");
				li.innerHTML="<a href='javascript:;' class='link'>新建的超链接</a>";
				//将li添加到ul里面
				ul.appendChild(li);				
			};
			
			//为每一个超链接绑定单击响应函数
			//获取a
			var a=document.getElementsByTagName("a");
			//这种方法有弊端，用这个对于新添加的超链接来并没有被绑定到
//			 for(var i=0;i<a.length;i++){
//			 	a[i].οnclick=function(){
//			 		alert("我是a的点击响应函数！");			 		
//			 	}
//			 };
			 //我们希望的是，只绑定一次，即可用到多个元素上，即使元素是后添加的
			 //所以就可以尝试绑定给这些元素的父元素，即祖先元素，所以我们可以给a的祖先元素ul绑定一个响应函数
			 ul.onclick=function(event){
			 	event=event||window.event;
			 	//如果触发事件的对象是我们期望的元素，则执行，否则不执行
			 	
//			 	 target
//			 	  event中的target便是触发事件的对象
			 	 if(event.target.className=="link"){
			 	 		alert("我是ul的响应函数~");
			 	 };
			 	
			 
			 };
			 //上面这个就是事件的委派 
		</script>
	</body>
</html>