javascript 之事件的委派

最新推荐文章于 2025-04-17 20:52:44 发布

youknowml

最新推荐文章于 2025-04-17 20:52:44 发布

阅读量115

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/yrhlyyouknow/article/details/107584362

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				//获取按钮以后添加超链接
				var btn01=document.getElementById("btn01");
				btn01.onclick=function(){
					//创建一个li
					var li=document.createElement("li");
					li.innerHTML="<a href='javascript:;' class='link'>创建的超链接</a>"
					//将li 添加到ul中
					u1.appendChild(li);
				};
				
				//为每一个超链接都绑定一个单击响应函数
				/* 这里我们为每一个超链接都绑定了一个单击响应函数
				这里我们为每一个超链接都绑定了一个单击响应函数,这种操作也比较麻烦
				而且这些操作只能为已有的超链接设置事件,而新添加的超链接必须重新绑定 */
				
				
				
				
				
				/* 我们希望,只绑定一次事件,即可应用到多个的元素上,
				即使元素是后添加的 */
				/* 我们可以尝试将其绑定给元素的共同的祖先元素 */
				
				
			/* 	
			事件的委派:
			将我们的事件同一绑定给元素共同的祖先元素
			这样当后代元素上的事件被触发的时候,会一直冒泡到祖先元素
			从而通过祖先元素的响应函数来处理事件
				事件委派是利用了我们的冒泡
				通过委派我们可以减少事件绑定的次数,从而提高程序的性能 */
				
				
				//获取所有的a
				var allA=document.getElementsByTagName("a");
				//遍历
				for(var i=0;i<allA.length;i++){
					allA[i].onclick=function(){
						alert(我是a的单击响应函数);
					};
				}
				//为ul 绑定一个单击响应函数
				u1.onclick=function(){
					/* 如果触发的对象是期望的哪个对象就是执行，
					否则的话就是不执行 */
					
					
				};
				u1.onclick=function(event){
					event=event||window.event;
					/* target:
					event中的target 表示的是触发事件的对象 */
					//alert(event.target);
					if(event.target.className=="link"){
						alert("我是ul 的单击响应函数");
						
					}
				};
					
				
			};
			</script>
	</head>
	<body>
		<button id="btn01">添加超链接</button>
		<ul id="u1" style="background-color:#bfa;">
			<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>
</html>

运行结果:
在这里插入图片描述