（JavaScript）前端JS不知道怎么理解网页？本专栏从0开始教学！（十五）：Event事件对象；移动爱心案例；Bubble事件冒泡；基于冒泡的事件委派处理

凉凉心.

发布于 2025-10-13 17:44:43

1230

事件对象(Event)

style和body内部

<style>
	.box{
		width:300px;
		height: 300px;
		margin: 100px auto 10px;
		background: #EDAFB0;
	}
	h4{
		width:300px;
		height: 100px;
		margin: 0 auto;
		border:1px solid #BD61E0;
	}
</style>

<div id="box" class="box"></div>
<h4 id="txt"></h4>

介绍

以鼠标 / 键盘事件为例，这两个事件都必不可少会存在一个事件对象，而这个对象就包含了如何这些信息

属性	描述
altKey	返回当事件被触发时，“ALT” 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，“CTRL” 键是否被按下。
metaKey	返回当事件被触发时，“meta” 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，“SHIFT” 键是否被按下。

onmousemove

该事件将会在鼠标在元素中移动时被触发事件对象
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递传递进响应函数,在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标键盘那个按键被按下，鼠标滚轮滚动的方向

在IE8中，响应函数被触发时，浏览器不会传递事件对象，在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的

window.onload=function(){
	var box=document.getElementById("box");
	var txt=document.getElementById("txt");
	box.onmousemove=function(event){
		event=event||window.event;
		/*
			clientX  可以获取鼠标指针的水平坐标
			clientY  可以获取鼠标指针的垂直坐标
		*/
		var X=event.clientX;
		var Y=event.clientY;
		txt.innerHTML="X="+X+" Y="+Y;
	}
}

其他鼠标事件中事件对象都与onmousemove事件一致，只是事件与事件触发的条件不同，事件对象还是不会变的

案例 - 移动爱心

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>73JavaScript事件对象案例_移动的爱心</title>
<style>
	body{
		height: 1200px;
		background-color: blueviolet;
	}
	#heart{
		width:100px;
		height: 166px;
		background: url("../javaScript高级语法/images/bilibili.png")no-repeat;
		background-size: contain;
		position: absolute;/*设置移动一定要设置定位*/
	}
	#container{
		width:300px;
		height:300px;
		background: #EA9C9E;
	}
</style>
</head>

<body>
	<div id="container"></div>
	<div id="heart"></div>
	
	<script>
		window.onload=function(){
			var box=document.getElementById("heart");
			var container=document.getElementById("container");
			var container=document.getElementById("container");
			document.onmousemove=function(event){
				// console.log(1);
				//处理兼容性问题
				event=event||window.event;
				//获取到鼠标的坐标
				/*
					clientX和clientY
						- 用于获取鼠标当前的可见窗口的坐标
							div的偏移量是相对于整个网页的
				*/
				// var left=event.clientX;
				// var top=event.clientY;
				
				/*
					pageX和pageY
						-  用于获取鼠标相对于当前页面的坐标
							但是这个属性在IE8中不兼容，所以如果需要兼容IE8,则不要使用
				*/
				// var left=event.pageX;
				// var top=event.pageY;
				/*
					获取滚动条滚动的距离
						Chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取 
						火狐等浏览器认为浏览器的滚动条是HTML的

						最新的Chrome浏览器中可以使用document.documentElement.scrollTop获取值
				*/
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
				// console.log(document.body.scrollTop);
				var left=event.clientX+scrollLeft;
				var top=event.clientY+scrollTop;
				
				box.style.left=left+"px";
				box.style.top=top+"px";
				
			}
			container.onmousemove=function(event){
				//事件对象
				event=event||window.event;
				//取消冒泡 
				event.cancelBubble=true;
			}
		}
	</script>
</body>
</html>

事件冒泡（Bubble）

所谓冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
在开发中大部分情况冒泡都是有用的，如果不希望冒泡发生可以通过事件对象取消冒泡 event.cancelBubble=true

style和body标签

<style>
body{
	background: #C7E9A8;
}
#box{
	width:400px;
	height: 400px;
	background: #E3ABAC;
	text-align: right;
}
#innerBox{
	width:200px;
	height: 200px;
	background: #CE95F3;
}
</style>
</head>

<body>
	<div id="box">
		box背景颜色粉红色
		<div id="innerBox">innerBox背景颜色紫色</div>
	</div>
</body>

js

varbox=document.getElementById("box");
var innerBox=document.getElementById("innerBox");
innerBox.onclick=function(event){
	//事件对象
	event=event||window.event;
	//取消冒泡 
	// event.cancelBubble=true;
	alert("innerBox的点击事件被触发了");
	console.log("当前被触发的是innerBox事件")
};
box.onclick=function(event){
	//事件对象
	event=event||window.event;
	//取消冒泡 
	// event.cancelBubble=true;
	alert("box的点击事件被触发了");
	console.log("当前被触发的是box事件")
};
document.body.onclick=function(){
	alert("body的点击事件被触发了");
	console.log("当前被触发的是body事件")
}

在开发中还是会经常遇到这种问题的。例如，想单独点击子标签，但因为冒泡，会一并点击该子标签上层的父标签。

事件委派

style和body标签

<style>
	ul{
		
	}	
	li{
		margin: 10px 0;
		background: #A9F0EA;
	}
</style>
</head>

<body>
	<button id="btn">添加列表项</button>
	<ul id="list">
		<li><a href="javascript:;">列表一</a></li>
		<li><a href="javascript:;">列表二</a></li>
		<li><a href="javascript:;">列表三</a></li>
	</ul>
</body>

若我们需要给每个a标签绑定点击事件该如何绑定？

window.onload=function(){
	var list=document.getElementById("list");
	var allA=list.getElementsByTagName("a");
	var btn=document.getElementById("btn");
	btn.onclick=function(){
		var li=document.createElement("li");
		li.innerHTML='<a href="javascript:;">新建列表项</a>';
		list.appendChild(li);
	}
}

为每一个a标签绑定一个单击响应事件，这种操作比较麻烦而且这种操作只能为已有的a标签绑定单击事件，新添加的超链接需要重新绑定

for(var i=0;i<allA.length;i++){
	allA[i].onclick=function(){
		alert("a标签被点击了");
	}
}

我们希望只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素

绑定父标签（事件委派）

指将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

list.onclick=function(event){
	event=event||window.event;
	console.log(event.target);
	console.log(event.target.nodeName);

	// 形参.返回生成事件的元素(节点).元素的名称
	if(event.target.nodeName=="A"){
		// 判断当前的元素节点名称是否等于 A；
		alert("a标签被点击了");
	}

//			alert("a标签被点击了");
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-08-03，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript