113-----JS基础-----事件的冒泡

最新推荐文章于 2023-06-01 09:30:59 发布

Mango酱

最新推荐文章于 2023-06-01 09:30:59 发布

阅读量69

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/weixin_44517656/article/details/121480976

版权

JavaScript学习笔记专栏收录该内容

121 篇文章 1 订阅

订阅专栏

一代码

不难，很简单，理解一下即可。但需要注意不是所有的东西都会发送事件的冒泡。例如他演示的矩形触发鼠标移动进入绿色的区域。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
			}
			
			#s1{
				background-color: yellow;
			}
			
			
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 1. 事件的冒泡（Bubble）
				 * 	- 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
				 * 	- 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
				 * 
				 */
				
				// 2. 为s1绑定一个单击响应函数
				var s1 = document.getElementById("s1");
				s1.onclick = function(event){
					event = event || window.event;
					alert("我是span的单击响应函数");
					
					// 5. 取消冒泡
					//可以将事件对象的cancelBubble设置为true，即可取消冒泡
					event.cancelBubble = true;
				};
				
				// 3. 为box1绑定一个单击响应函数
				var box1 = document.getElementById("box1");
				box1.onclick = function(event){
					event = event || window.event;
					alert("我是div的单击响应函数");
					
					event.cancelBubble = true;
				};
				
				// 4. 为body绑定一个单击响应函数
				document.body.onclick = function(){
					alert("我是body的单击响应函数");
				};
				
				
			};
			
			
		</script>
	</head>
	<body>
		
		<div id="box1">
			我是box1
			<span id="s1">我是span</span>
		</div>
		
	</body>
</html>

Mango酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
113-----JS基础-----事件的冒泡

一代码不难，很简单，理解一下即可。但需要注意不是所有的东西都会发送事件的冒泡。例如他演示的矩形触发鼠标移动进入绿色的区域。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 200px;
复制链接

扫一扫