JS事件事件的冒泡和委派

最新推荐文章于 2024-06-26 09:15:00 发布

可乐爆米花

最新推荐文章于 2024-06-26 09:15:00 发布

阅读量4.4k

点赞数

分类专栏： JavaScript 前端端端端端端

本文链接：https://blog.csdn.net/william_jzy/article/details/79780159

版权

前端端端端端端同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

JavaScript

20 篇文章 0 订阅

订阅专栏

##事件的冒泡（Bubble）
指的是事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同时间也会被触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 300px;
				height: 300px;
				background-color: lightpink;
			}
			#box2{
				width: 200px;
				height: 200px;
				background-color: lightgreen;
			}
			#box3{
				width: 100px;
				height: 100px;
				background-color: yellowgreen;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var box3 = document.getElementById("box3");
				
				box1.onclick = function(){
					alert("我是box1");
				};
				box2.onclick = function(){
					alert("我是box2");
				};
				box3.onclick = function(){
					alert("我是box3");
				};
			};
			
		</script>
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				<div id="box3"></div>
			</div>
		</div>
	</body>
</html>

可用事件对象来取消冒泡，将事件对象的cancleBubble设置为true

box3.onclick = function(event){
	event = event || window.event;
	alert("我是box3");
	event.cancelBubble = true;
};

通过事件的冒泡，可以做出让div跟随鼠标移动的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				height: 2000px;
				width: 1500px;
			}
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: coral;
				position: absolute;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				//获取box1
				var box1 = document.getElementById("box1");
				//
				//绑定鼠标响应函数
				document.onmousemove = function(event){
					event = event || window.event;
					
					//获取鼠标坐标
					//pageX和pageY可以获取鼠标相对于当前页面的坐标，但在IE8中不支持
					var x = event.clientX;//pageX
					var y = event.clientY;//pageY
					/*
					 *clientX和clientY 表示的是鼠标在当前可见窗口的坐标
					 * 因此如果出现滚动条就会出现错误
					 * 鼠标的坐标是当前窗口的坐标+滚动条滚动的距离
					 */
					 
					//获取滚动条滚动的长度
					var sv = document.body.scrollTop || document.documentElement.scrollTop;
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
					
					//给box1设置偏移量
					box1.style.left = x + sl + "px";
					box1.style.top = y + sv + "px";
				};
				
			};
		</script>
		
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

这里写图片描述

##事件的委派
将事件统一绑定给元素共同的祖先元素（后代元素事件触发时，通过冒泡，通过祖先元素的响应函数来处理事件）
这样可以只绑定一次，即可应用到多个元素上
事件的委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

event中的target表示的触发事件的对象
使用它对触发事件的元素进行判断

<!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");
				//为ul绑定一个单击响应函数
				u1.onclick = function(event){
					event = event || window.event;
					//如果触发事件的对象是我们期望的元素，则执行否则不执行
					if(event.target.className == "link"){
						alert("我是ul的单击响应函数");
					}
				};
			};
		</script>
	</head>
	<body>
		<button id="btn01">添加超链接</button>
		<ul id="u1" style="background-color: #bfa;">
			<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>

这里写图片描述

可乐爆米花

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
JS事件事件的冒泡和委派

事件的冒泡（Bubble）指的是事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同时间也会被触发&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;s
复制链接

扫一扫

专栏目录