js事件的委派

最新推荐文章于 2022-09-29 08:52:09 发布

嗒_嗒嗒

最新推荐文章于 2022-09-29 08:52:09 发布

阅读量158

点赞数

分类专栏： JS知识点总结文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45561258/article/details/115511225

版权

JS知识点总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.点击按钮以后添加超链接，然后为每一个超链接都绑定一个单击响应函数
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				var u1 = document.getElementById("u1");
				
				//点击按钮以后添加超链接
				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的单击响应函数！！！");
					};
				}
								
			};
			
		</script>
	</head>
	<body>
		<button id="btn01">添加超链接</button>
		
		<ul id="u1" style="background-color: pink;">
			<li>
				<p>我是p元素</p>
			</li>
			<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>

我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的,我们可以尝试将其绑定给元素的共同的祖先元素
2. 事件的委派
指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

<script type="text/javascript">
			
	window.onload = function(){
		
		var u1 = document.getElementById("u1");
		
		//点击按钮以后添加超链接
		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);
		};
		
		  //为ul绑定一个单击响应函数
          u1.onclick = function(event){
			event = event || window.event;
			
			/*
			 * target
			 * 	- event中的target表示的触发事件的对象
			 */
			
			console.log(event.target);   
			 //单击“新建的超链接”，打印如下：
			//<a href='javascript:;' class='link'>新建的超链接</a>
			
			//如果触发事件的对象是我们期望的元素，则执行否则不执行
			if(event.target.className == "link"){
				alert("我是ul的单击响应函数");
			}
			
		};
						
	};
	
</script>

嗒_嗒嗒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件的委派

1.点击按钮以后添加超链接，然后为每一个超链接都绑定一个单击响应函数<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload = function(){ var u1 = document.getEle
复制链接

扫一扫