JS事件冒泡与事件委派(委托)

最新推荐文章于 2024-04-27 00:23:45 发布

Yhuanbo

最新推荐文章于 2024-04-27 00:23:45 发布

阅读量1.6k

点赞数 2

文章标签： javascript 事件冒泡事件委派

原文链接：https://blog.csdn.net/shang_0122/article/details/104884727

版权

文章目录

一、事件冒泡
二、事件委派(委托)
三、总结

一、事件冒泡

指的是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
如果不希望发生事件冒泡可以通过事件对象属性来取消冒泡

举例：
效果图：
在这里插入图片描述
其中body是爷爷，绿色div(我是box1)是爸爸，黄色span(我是span)是儿子，给这三代都绑上单击响应函数
实现代码

body代码

<body>
	<div id="box1">
		我是box1
		<span id="s1">我是span</span>
	</div>
</body>

CSS代码

<style type="text/css">
	#box1{
		width: 200px;
		height: 200px;
		background-color: yellowgreen;
	}
	
	#s1{
		background-color: yellow;
	}
</style>

JS代码

<script type="text/javascript">
	
	window.onload = function(){
		
		//为s1绑定一个单击响应函数
		var s1 = document.getElementById("s1");
		s1.onclick=function(){
			alert("我是span单击响应函数");
		}
		
		//为box1绑定一个单击响应函数
		var box1 = document.getElementById("box1");
		box1.onclick=function(){
			alert("我是box1单击响应函数");
		}
		
		//body绑定一个单击响应函数
		document.body.onclick = function(){
			alert("我是body单击响应函数")
		}
	}
</script>

触发效果如下：
当点击儿子(span)时，他，他爸爸(div)及他爷爷(body)都会触发各自的响应函数，它爸爸同理

实现终止冒泡

通过事件对象cancelBubble属性来取消冒泡
event.cancelBubble = true;
如终止儿子(span)冒泡，即它爸爸及它爷爷都不触发单击事件

完整代码

s1.onclick=function(event){

	//解决浏览器兼容问题
	event=event || window.event;
	alert("我是span单击响应函数");
	
	//取消冒泡
	event.cancelBubble = true;
}

二、事件委派(委托)

是什么

指将事件统一绑定给元素的共同的祖先元素
当后代上的事件触发时,会一直冒泡到祖先元素
通过祖先元素的响应函数来处理事件

下面举例子说明
效果图：
在这里插入图片描述
实现动态添加超链接并绑定事件

实现代码
body代码

	<body>
		<button id="btn01">添加超链接</button>
		
		<ul id="u1" style="background-color: yellow;">
			<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>

JS代码

<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);
		}
		
		u1.onclick = function(event){
			//解决浏览器兼容问题
			event = event || window.event;
			
			/**
			 * target
			 *  -事件对象的target属性表示触发事件的对象
			 *  -ul中包括li、文本及超链接，只有点击超链接触发事件
			 */
			if(event.target.className == "link"){
				alert("我是ul单击响应函数");
			}
		}
	}
</script>

三、总结

事件冒泡是事件委托及事件传播的基础，得好好理解

Yhuanbo

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JS事件冒泡与事件委派(委托)

文章目录一、事件冒泡二、事件委派(委托)三、总结一、事件冒泡指的是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发如果不希望发生事件冒泡可以通过事件对象属性来取消冒泡举例：效果图：其中body是爷爷，绿色div(我是box1)是爸爸，黄色span(我是span)是儿子，给这三代都绑上单击响应函数实现代码 body代码 <body> <div id="box1"> 我是box1 <span id="..
复制链接

扫一扫