事件对象与事件处理技巧-优快云博客

本文深入探讨了事件对象的概念，包括如何通过onmousemove获取鼠标坐标，并详细解析了事件冒泡原理及其应用，同时介绍了事件委派技术，以提高程序性能。

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

事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
在事件对象中封装了当前事件相关的一切信息
例如：我们鼠标的移动，键盘的按下等等都是我们所说的事件对象

需要知道的知识点：
onmousemove 该事件会在鼠标元素中移动时触发
clientX 可以获取鼠标指针的水平坐标
clientY 可以获取鼠标指针的垂直坐标

我们用一个小例子来解释：
我们实现的功能是要当鼠标在一个div中移动时，在另外一个div中显示鼠标的坐标

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件对象</title>
	<style>
		#areDiv{
			border:1px solid black;
			width: 300px;
			height: 50px;
			margin-bottom: 10px;		
		}
		#showMsg{
			border:1px solid black;
			width: 300px;
			height: 20px;
		}
	</style>
	<script>
		window.onload=function(){
			//获取两个div
			var areDiv=document.getElementById("areDiv");
			var showMsg=document.getElementById("showMsg");
			//onmousemove 该事件会在鼠标元素中移动时触发
			areDiv.onmousemove=function(event){
				
				/*
				clientX 可以获取鼠标指针的水平坐标
				clientY 可以获取鼠标指针的垂直坐标
				*/
				var X=event.clientX;  //注意大小写
				var Y=event.clientY;
				//在showMsg中显示当前鼠标位置的坐标
				showMsg.innerHTML="x="+X+",y="+Y;
			}
		}
	</script>
</head>
<body>
	<div id="areDiv"></div>
	<div id="showMsg"></div>
</body>
</html>

在这里插入图片描述

事件的冒泡（Bubble）

所谓的冒泡指的就是事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同步事件也会被触发

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>冒泡</title>
	<style>
		
		#s1{
			width: 300px;
			height:300px;
			background-color: yellowgreen;
			
		}
		#s2{
			width: 150px;
			height: 150px;
			background-color: yellow;
		}
		#s3{
			width: 50px;
			height: 50px;
			background-color: red;
		}
	</style>
	<script>
		window.onload=function(){
			var s1=document.getElementById("s1");
			s1.onclick=function(){
				alert("我是s1");
			}
		
			var s2=document.getElementById("s2");
			s2.onclick=function(){
				alert("我是s2");
			}
			
			var s3=document.getElementById("s3");	
			s3.onclick=function(){
				alert("我是s3");
			}	
		}
	</script>
</head>
<body>
	<div id="s1">
		<div id="s2">
			<div id="s3"></div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述

事件的委派

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

<!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>