深入理解JavaScript事件对象：属性、代理与实战

作者：小圆点时间：2026-10-24 07:47:02浏览：324

本文深入解析JavaScript中的事件对象，涵盖常见事件类型及event核心属性（bubbles、type、target等）。重点讲解事件代理原理，通过e.target与e.currentTarget区分触发与绑定节点，并演示如何使用preventDefault和stopPropagation控制行为与传播，结合跟随鼠标案例提供完整代码实现。

在JavaScript开发中，常见的事件类型包括以下几类：

页面加载事件：load；
焦点相关事件：focus，blur；
鼠标交互事件：click，mouseout，mouseover，mousemove等；
键盘操作事件：keydown，keyup，keypress；
表单提交事件：reset，submit；
内容变更事件：change，input

那么，JavaScript中的“事件对象”究竟包含什么内容？

首先，我们需要明确什么是事件。

JavaScript的设计初衷是实现动态交互。当用户执行提交表单或点击鼠标等操作时，浏览器会感知并捕获这些行为，进而触发相应的响应处理流程，这一过程即称为事件。

那么，为什么需要产生事件对象？

事件的触发通常源于用户的主动操作，这意味着我们无法预知用户何时会触发事件；此外，由于事件传播机制的存在，甚至难以确定事件具体发生在哪个DOM节点上，这给开发带来了挑战。

为了解决上述不确定性，系统在事件发生后，会调用开发者编写好的事件处理程序（即一段代码）来进行处理。

由此引出了事件对象的概念。

系统在调用处理程序时，会将与事件发生相关的所有信息封装成一个对象，并将其作为参数传递给监听函数（事件处理程序）。这个封装后的对象就被称为事件对象。

根据事件类型的不同，事件对象中包含的具体信息也会有所差异；例如，在点击事件中，包含鼠标点击的横纵坐标位置；在键盘事件中，则包含键盘的键值等。


<body>
 <div id="div">
 <p>pppp</p>
 </div>
 <input type="text" value="" id="i">
</body>
<script>
var d = document.getElementById('div');
//鼠标事件
d.addEventListener('click',function(e){
 console.log(e);
});
var i = document.getElementById('i');
//键盘事件
i.addEventListener('keydown',k);
function k(e){
 console.log(e);
}
</script>

首先，我们需要明确什么是事件。

现在了解了事件对象的含义后，我们来看看事件对象中都有哪些属性和方法？

（1）普通属性:

event.bubbles: 返回一个布尔值，表示当前事件是否会冒泡;

event.eventPhase：返回一个整数值，表示事件流在传播阶段的位置

0:事件目前没有发生。 1:事件目前处于捕获阶段。 2:事件到达目标节点。 3:事件处于冒泡阶段。

event.type: 返回一个字符串，表示事件类型，大小写敏感;

event.timeStamp: 返回一个毫秒时间戳，表示事件发生的时间;

clientX、clientY : 获取鼠标事件触发的X,Y坐标

事件对象

（2）事件代理/委托属性:

event.target：对事件触发的引用，返回触发事件发生的那个节点。（重点）

event.currentTarget：返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点。（了解即可）


 var d = document.getElementById('d');
 d.onclick = function(e){
 //返回事件节点
 console.log(e.currentTarget);
 //返回触发节点
 console.log(e.target);
 }

事件代理（事件委托）的含义：由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这个方法叫做事件的代理也叫事件代理或者事件委托。


<head>
 <title></title>
 <meta charset="UTF-8">
 <style>
 div{padding: 40px}
 #div3{width: 300px;height: 300px;border: 1px solid red;}
 #div2{width: 200px;height: 200px;border: 1px solid red;}
 #div1{width: 100px;height: 100px;border: 1px solid red}
 </style>
</head>
<body>
 <div id="div3">div3
 <div id="div2">div2
  <div id="div1">div1</div>
 </div>
 </div>
</body>
<script>
 var d = document.getElementById('div3');
 d.onclick = function(e){
 e.target.style.background = 'red';
 }
</script>

根据上面的代码可以得到三个div的位置大概如下：点击每个div，每个div的整体就会变成红色。主要是通过e.target返回了点击触发的该节点。

首先，我们需要明确什么是事件。

（3）阻止浏览器默认行为和阻止事件传播的方法event.preventDefault()：该方法阻止浏览器会执行当前事件的默认行为，比如点击链接后，浏览器跳转到指定页面；或者按一下空格键，页面向下滚动一段距离。event.stopPropagation()：该方法阻止事件在DOM结构中继续传播，防止再触发定义在别的节点上的监听函数。


<body>
 <div id="div2">2
 <div id="div1">1
  <a id="a" href="百度2下">我的皎月闻越想闻</a>
 </div>
 </div>
</body>
<script>
 var d2 = document.getElementById('div2');
 var d1 = document.getElementById('div1');
 var a = document.getElementById('a');
 d2.onclick = function(e){
 alert('d2');
 }
 d1.onclick = function(e){
 alert('d1');
 }
 a.onclick = function(e){
 //阻止事件传播
 e.stopPropagation();
 alert('a');
 //阻止浏览器默认行为
 e.preventDefault();
 }
</script>

使用事件对象，实现一个简单的小案例：跟着鼠标飞的div（通过修改事件对象的XY值）


<body>
 <div id="div2">2
 <div id="div1">1
  <a id="a" href="百度2下">我的皎月闻越想闻</a>
 </div>
 </div>
</body>
<script>
 var d2 = document.getElementById('div2');
 var d1 = document.getElementById('div1');
 var a = document.getElementById('a');
 d2.onclick = function(e){
 alert('d2');
 }
 d1.onclick = function(e){
 alert('d1');
 }
 a.onclick = function(e){
 //阻止事件传播
 e.stopPropagation();
 alert('a');
 //阻止浏览器默认行为
 e.preventDefault();
 }
</script>

首先，我们需要明确什么是事件。

点击前（不动）

首先，我们需要明确什么是事件。

点击后（跟着鼠标走）

总结

到此这篇关于js中事件对象的文章就介绍到这了,更多相关js事件对象内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JS在setTimeout或Ajax回调中打开新标签页失败怎么处理

2026-11-05 15:50:12

JS直播协议选型：HLS、FLV与WebRTC的延迟与兼容性对比

2026-11-05 12:16:14

JS实现回到顶部：scrollTop赋值与浏览器兼容性处理

2026-11-04 23:43:35

JS使用classList动态添加、移除和切换CSS类名

2026-11-04 23:40:58

在 D3.js 中实现平滑过渡动画的技巧

2026-11-03 23:46:09