事件处理与交互-优快云博客

本文链接：https://blog.youkuaiyun.com/yjzhu1987/article/details/8003327

本文介绍了JavaScript中的事件处理机制，包括事件对象的使用、鼠标与键盘事件的捕获、事件冒泡原理及应用，并提供了实现跟随鼠标移动的div元素等实用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、什么是event对象

所谓的event对象，就是用来获取事件的详细信息：鼠标位置（clientX，clientY），键盘事件（keyCode）

举个例子：获取鼠标位置：clientX，clientY

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>获取鼠标位置</title>
</head>
<body>
	
</body>
</html>
<script type="text/javascript">
document.onclick = function(){
	alert('横坐标：' + event.clientX + ' ,纵坐标：' + event.clientY);
}
</script>

在IE下可以看到鼠标的坐标位置。当然上面的代码有兼容问题，只兼容IE，不兼容FF，需要通过传递参数可以解决FF。

2、获取event对象（兼容性写法）

将上面的代码修改为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>获取鼠标位置</title>
</head>
<body>
	
</body>
</html>
<script type="text/javascript">
document.onclick = function(e){
	var oEvent = e || event;
	alert('横坐标：' + oEvent.clientX + ' ,纵坐标：' + oEvent.clientY);
}
</script>

这样我们就做到了兼容所有浏览器。

3、事件冒泡

说到事件对象，不可避免的要说到事件冒泡，那么什么是事件冒泡呢？

事件冒泡就是当事件触发完成后，会将事件传递到父层，继续触发，直到最后的document。下面的例子可以很好的解释什么是事件冒泡：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>什么是事件冒泡</title>
</head>
<body>
	<div style="width:300px; height:300px; background:red;" onclick="alert(this.style.background);">
		<div style="width:200px; height:200px; background:green;" onclick="alert(this.style.background);">
			<div style="width:100px; height:100px; background:gray;" onclick="alert(this.style.background);"></div>
		</div>
	</div>
</body>
</html>

如何取消冒泡？oEvent.cancelBubble = true;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>取消冒泡</title>
	<style type="text/css">
	#div1{width:100px;height:100px;background:red;display:none;}
	</style>
</head>
<body>
	<input type="button" value="点击显示" id="btn1" /><br />
	<div id="div1"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
	var oBtn = document.getElementById('btn1');
	var oDiv = document.getElementById('div1');
	
	oBtn.onclick = function(e){
		var oEvent = e || event;
		
		oDiv.style.display = 'block';
		oEvent.cancelBubble = true;
	};
	document.onclick = function(){
		oDiv.style.display = 'none';
	}
}
</script>

4、鼠标事件

前面我们说到clientX，clientY，其实指的是鼠标可视区坐标。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>跟随鼠标的div</title>
	<style type="text/css">
	#div1{width:100px;height:100px;background:red;position:absolute;top:0;left:0;}
	</style>
</head>
<body style="height:2000px;">
	<div id="div1"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
	var oDiv = document.getElementById('div1');
	document.onmousemove = function(e){
		var oEvent = e || event;
		oDiv.style.left = oEvent.clientX + 'px';
		oDiv.style.top = oEvent.clientY + 'px';
	}
}
</script>

上面的代码我们可以看出，当页面滚动一定距离时，鼠标和div分开了。这个就解释了为什么clientX，clientY是可视区坐标。之所以出错了，是因为没有算上滚动距离，下面我们来介绍滚动距离。

首先需要介绍滚动条的意义：可视区与页面顶部的距离。而这段距离就是滚动距离了。如何获取滚动距离？答案是 scrollTop

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//前一个兼容ie/ff，后一个兼容chrome

最终代码为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>跟随鼠标的div</title>
	<style type="text/css">
	#div1{width:100px;height:100px;background:red;position:absolute;top:0;left:0;}
	</style>
</head>
<body style="height:2000px;">
	<div id="div1"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
	var oDiv = document.getElementById('div1');
	document.onmousemove = function(e){
		var oEvent = e || event;
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
		
		oDiv.style.left = oEvent.clientX + scrollLeft + 'px';
		oDiv.style.top = oEvent.clientY + scrollTop + 'px';
	}
}
</script>

5、键盘事件

keyCode——获取用户按下键盘的哪个按键。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>keyCode</title>
	<style type="text/css">
	#div1{width:100px;height:100px;background:red;position:absolute;}
	</style>
</head>
<body>
	<div id="div1"></div>
</body>
</html>
<script type="text/javascript">
document.onkeydown = function(e){
	var oEvent = e || event;
	var oDiv = document.getElementById('div1');
	//alert(oEvent.keyCode);
	if(oEvent.keyCode == 37){
		oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
	}
	if(oEvent.keyCode == 39){
		oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
	}
	if(oEvent.keyCode == 38){
		oDiv.style.top = oDiv.offsetTop - 10 + 'px';
	}
	if(oEvent.keyCode == 40){
		oDiv.style.top = oDiv.offsetTop + 10 + 'px';
	}
}
</script>

PS：博客搬家了，以后不再优快云更新了，见谅。最新博客地址：http://www.cnblogs.com/yjzhu/