DOM事件详解：Event对象的方法与属性及IE兼容处理

作者：像素猫时间：2026-10-30 17:59:55浏览：410

本文深入解析DOM事件中的Event对象，详细讲解stopPropagation、preventDefault及stopImmediatePropagation三个核心方法的用途与区别。同时梳理type、target等常用属性，并提供针对IE8及以下版本的window.event、cancelBubble及returnValue兼容方案，帮助开发者掌握跨浏览器事件处理技巧。

DOM事件Event对象概述

在《DOM事件的深入浅出（一）》中，我们主要探讨了不同DOM级别下的事件处理程序，以及事件冒泡和捕获的触发原理与方法。本文将延续这一主题，进一步介绍DOM事件中的关键知识点，重点聚焦于Event对象的属性与方法。

所谓DOM事件中的Event对象，是指与特定事件相关联且包含该事件详细信息的对象。我们可以通过传递给事件处理程序的参数，获取事件触发后产生的一系列方法和属性。

Event对象

Event对象实际上是事件处理程序的一个参数。当调用事件时，只需将其传入事件函数即可获取。具体代码如下：


function getEvent(event) {
 event = event || window.event;
}

上述事件函数传入了一个名为Event的参数作为事件对象，并进行了浏览器兼容性处理。在IE8及更早版本中，通过设置属性注册事件处理程序时，调用过程并未传递事件对象，而是需要通过全局对象window.event来获取。因此，上述代码利用 || 运算符进行判断：如果event对象存在则使用event，否则使用window.event。

Event对象包含多个方法和属性，通过这些方法和属性，我们可以获取事件的详细信息并进行相应的处理。

Event对象核心方法详解

Event对象方法

Event对象主要包含以下两个方法，分别用于处理事件的传播（冒泡、捕获）和事件的取消。

1.stopPropagation

stopPropagation方法主要用于阻止事件的进一步传播，例如阻止事件继续向上层冒泡。


function getEvent(event) {
 event.stopPropagation();
}
child.addEventListener('click', getEvent, false);

如果需要兼容IE8及以下版本的浏览器，则需要利用cancelBubble来代替stopPropagation，因为低版本IE不支持stopPropagation方法。


function getEvent(event) {
 event = event || window.event;
 if (event.stopPropagation) {
 event.stopPropagation();
 } else {
 event.cancelBubble = true;
 }
}

cancelBubble是IE事件对象的一个属性，将该属性设置为true即可阻止事件进一步传播。

2.preventDefault

preventDefault方法用于取消事件的默认操作，例如a链接的跳转行为和表单自动提交行为都可以使用preventDefault方法来取消。具体代码如下：


<a id="go" href="https://www.baidu.com/">禁止跳转</a>
var go = document.getElementById('go');
function goFn(event) {
 event.preventDefault();
 console.log('我没有跳转！');
}
go.addEventListener('click', goFn, false);

通过调用preventDefault，我们成功阻止了a链接的跳转行为。不过，在IE9之前的浏览器中，需要设置returnValue属性为false来实现相同效果。如下所示：


function goFn(event) {
 event = event || window.event;
 if (event.preventDefault) {
 event.preventDefault();
 } else {
 event.returnValue = false;
 }
 console.log('我没有跳转！');
}

除了上述Event对象的两个主要方法外，当前DOM事件规范草案还在Event对象上定义了另一个方法，命名为stopImmediatePropagation。

3.stopImmediatePropagation

与stopPropagation相比，stopImmediatePropagation同样可以阻止事件的传播，但其不同之处在于，它还可以阻止该元素绑定的同类型其他事件执行。例如：


var go = document.getElementById('go');

function goFn(event) {
 event.preventDefault();
 event.stopImmediatePropagation(); // 阻止事件冒泡并阻止同类型事件
 console.log('我没有跳转！');
}
function goFn2(event) {
 console.log('我是同类型事件！');
}
go.addEventListener('click', goFn, false);
go.addEventListener('click', goFn2, false);

我们在a链接上继续添加了一个点击事件。如果在goFn方法中添加了stopImmediatePropagation方法，那么goFn2方法将不会被执行，同时点击事件也不会冒泡至上层。

需要注意的是，目前部分浏览器尚不支持stopImmediatePropagation，但像jQuery这样的库封装了跨平台的stopImmediatePropagation方法。

Event对象常用属性解析

Event对象属性

与Event对象的方法相比，由于Event对象的属性相对较多，本文无法一一讲解，因此主要介绍实际项目中常用的Event对象属性。

1.type属性

通过type属性，我们可以获取事件发生的类型，例如点击事件获取的是'click'字符串。


var go = document.getElementById('go');
function goFn(event) {
 console.log(event.type); // 输出'click'
}
go.addEventListener('click', goFn, false);

2.target属性

target属性主要用于获取事件的目标对象，例如我们点击a标签时，获取的是a标签的html对象。


var go = document.getElementById('go');
function goFn(event) {
 var target = event.target;
 console.log(target === go) // 返回true
}
go.addEventListener('click', goFn, false);

在IE8及之前版本中，我们需要使用srcElement而非target。兼容方案如下：


function goFn(event) {
 var event = event || window.event, 
 target = event.target || event.srcElement;
 console.log(target === go) // 返回true
}

3. 鼠标事件属性

在用鼠标触发事件时，主要的事件属性包含鼠标的位置和按键状态，例如：clientX和clientY指定了鼠标在窗口坐标中的位置，button和which指定了按下的鼠标键是哪个。


function moveFn(event) {
 console.log(event.screenX) // 获取鼠标基于屏幕的X轴坐标
 console.log(event.screenY) // 获取鼠标基于屏幕的Y轴坐标
 console.log(event.clientX) // 获取鼠标基于浏览器窗口的X轴坐标
 console.log(event.clientY) // 获取鼠标基于浏览器窗口的Y轴坐标
 console.log(event.pageX) // 获取鼠标基于文档的X轴坐标
 console.log(event.pageY) // 获取鼠标基于文档的Y轴坐标
}
function clickFn(event) {
 console.log(event.button) // 获取鼠标按下的键。非IE浏览器中0为鼠标左键，1为鼠标中键，2为鼠标右键
 console.log(event.which) // 获取指定事件上哪个键盘键或鼠标按钮被按下
}
document.addEventListener('mouseover', moveFn, false);
document.addEventListener('click', clickFn, false);

4.键盘事件属性

在用键盘触发事件时，主要的事件属性包含键盘的按键keyCode和是否按下特殊键，例如：keyCode指定了按下键的键码值，ctrlKey指定是否按下了ctrl键。


function keyFn(event) {
 console.log(event.keyCode); // 获取按下键的键码值
 console.log(event.ctrlKey); // 获取是否按下了ctrl键
 console.log(event.shiftKey); // 获取是否按下了shift键
 console.log(event.altKey); // 获取是否按下了alt键
 console.log(event.metaKey); // 获取是否按下了meta键
}
document.addEventListener('keyup', keyFn, false);

类似的事件属性还有表单事件属性和window事件属性等，这里不再做详细介绍。有兴趣的同学可以查阅相关资料。

总结与参考

总结

本文主要讲解了DOM事件中Event对象的常用属性和方法，同时也介绍了其在IE中的兼容性问题及解决方案。然而关于DOM事件的知识点远不止这些，希望仅此能够帮助初识DOM的开发者。

备注：文本参考自《Javascript权威指南》一书及慕课网教程《DOM事件揭秘》。

以上就是本文的全部内容，希望对大家有所帮助，有兴趣的朋友可以看下《DOM事件的深入浅出（一）》，谢谢对本站的支持！

作者最新文章

js-cookie 安装与基础用法：set、get、remove 详解

2026-11-05 16:35:06

适合JavaScript初学者的实战项目：制作简易待办事项列表

2026-11-05 16:17:07

JS打开新标签页时怎么通过URL传递参数

2026-11-05 12:21:08

sigma.js 自定义节点样式：设置颜色、大小及标签显示的技巧

2026-11-05 09:55:00

JS 生成的统计图怎么导出为 PNG 图片或 PDF 文件？

2026-11-05 09:37:58