当前位置：首页 > ops >正文

JavaScript基础-事件对象

ops 2025/6/17 7:25:12

一、前言

在前端开发中，用户与页面的交互行为（如点击按钮、输入文本、滚动页面等）都会触发相应的事件。而这些事件发生时，浏览器会自动创建一个 事件对象（Event Object），它包含了当前事件的所有信息。

掌握事件对象是实现复杂交互逻辑的基础技能之一。本文将带你深入了解：

什么是事件对象；
事件对象的常见属性与方法；
如何阻止默认行为与事件传播；
实际开发中的典型使用场景；
推荐的最佳实践；

通过这篇文章，你将能够熟练地使用 event 对象来增强网页的交互体验。

二、什么是事件对象？

当一个事件被触发时（例如点击、键盘按下、鼠标移动等），浏览器会自动为该事件创建一个事件对象（Event 或其子类实例），并将其作为参数传递给事件处理函数。

document.addEventListener('click', function(event) {console.log(event)
})

📌 事件对象包含的信息有：

触发事件的目标元素（target）
鼠标位置坐标（clientX / clientY）
键盘按键值（keyCode）
是否按下了 Ctrl/Shift 等修饰键
阻止默认行为的方法（preventDefault）
阻止事件传播的方法（stopPropagation）

三、事件对象的主要属性和方法

属性/方法	描述
`target`	触发事件的真实元素（原始触发者）
`currentTarget`	绑定事件监听器的元素（this 指向的对象）
`type`	事件类型（如 'click'、'keydown' 等）
`preventDefault()`	阻止浏览器的默认行为（如链接跳转、表单提交）
`stopPropagation()`	阻止事件继续传播（捕获或冒泡）
`stopImmediatePropagation()`	阻止该事件的所有后续监听器执行
`bubbles`	表示该事件是否会冒泡
`cancelable`	表示是否可以取消该事件的默认行为
`eventPhase`	当前事件所处的阶段（捕获、目标、冒泡）

✅ 示例：获取事件对象的基本信息

<a href="https://example.com" id="link">点击我</a><script>
document.getElementById('link').addEventListener('click', function(event) {console.log('事件类型:', event.type) // clickconsole.log('目标元素:', event.target) // <a> 元素console.log('绑定事件的元素:', event.currentTarget) // 同上console.log('是否可阻止默认:', event.cancelable) // trueconsole.log('是否冒泡:', event.bubbles) // trueconsole.log('事件阶段:', event.eventPhase) // 2（目标阶段）
})
</script>

四、`target` 与 `currentTarget` 的区别

这是开发者最容易混淆的一组属性。

🧠 理解差异：

event.target：真正触发事件的 DOM 元素（可能是子元素）。
event.currentTarget：绑定事件监听器的那个元素（即 this）。

✅ 示例说明：

<div id="container"><button id="btn">点击我</button>
</div><script>
document.getElementById('container').addEventListener('click', function(event) {console.log('event.target:', event.target) // 可能是 button 或 divconsole.log('event.currentTarget:', event.currentTarget) // 始终是 container
})
</script>

📌 场景总结：

使用场景	推荐属性
获取真正点击的元素	`event.target`
获取绑定事件的元素	`event.currentTarget`

五、阻止默认行为：`preventDefault()`

有些 HTML 元素自带默认行为，比如：

<a> 标签点击会跳转；
<form> 提交会刷新页面；
<input type="checkbox"> 点击会切换状态；

我们可以使用 event.preventDefault() 来阻止这些默认行为。

✅ 示例：阻止链接跳转

document.querySelector('a').addEventListener('click', function(event) {event.preventDefault()alert('链接被点击，但没有跳转')
})

📌 注意事项：

不会影响事件传播；
适用于自定义行为替代默认行为的场景。

六、阻止事件传播：`stopPropagation()`

默认情况下，事件会在 DOM 树中进行传播（捕获 → 目标 → 冒泡）。我们可以通过 stopPropagation() 来阻止事件继续传播到其他节点。

✅ 示例：阻止父级元素响应事件

<div id="parent">父容器<button id="child">点击我</button>
</div><script>
document.getElementById('parent').addEventListener('click', () => {console.log('父元素被点击')
})document.getElementById('child').addEventListener('click', function(event) {console.log('子元素被点击')event.stopPropagation()
})
</script>

📌 输出结果：

子元素被点击

父元素不会收到事件通知。

七、彻底阻止事件：`stopImmediatePropagation()`

如果你希望不仅阻止事件传播，还想阻止当前元素上的其它监听器执行，可以使用这个方法。

✅ 示例：

const btn = document.getElementById('btn')btn.addEventListener('click', function (e) {console.log('第一个监听器')e.stopImmediatePropagation()
})btn.addEventListener('click', function () {console.log('第二个监听器') // 不会执行
})

📌 效果：

第一个监听器调用 stopImmediatePropagation() 后，所有后续监听器都不会执行。

八、事件对象的实际应用场景

场景	描述
表单验证	在 submit 事件中使用 `preventDefault()` 自定义提交逻辑
弹窗关闭	点击遮罩层关闭弹窗，使用 `target` 判断是否点击了遮罩区域
表格行点击	获取点击的具体行数据
鼠标坐标获取	记录用户点击的位置
多个监听器控制	使用 `stopImmediatePropagation()` 控制优先级
动态加载内容	通过 `target` 判断点击的是哪个动态生成的元素

九、事件对象的兼容性注意事项

虽然现代浏览器都支持标准的 Event API，但在一些旧版本浏览器（如 IE）中可能会存在兼容问题。

方法/属性	IE 支持情况	解决方案
`event.target`	✅ IE9+
`event.currentTarget`	❌ IE8 及以下不支持
`event.preventDefault()`	✅ IE9+
`event.stopPropagation()`	✅ IE9+
`event.stopImmediatePropagation()`	❌ IE 不支持
`event.clientX / Y`	✅ 支持良好

📌 推荐做法：

使用现代浏览器开发；
若需兼容旧版浏览器，建议使用框架（如 jQuery）封装兼容性处理；
或自行封装 polyfill。

十、总结对比表

特性	推荐方式
获取触发元素	`event.target`
获取绑定元素	`event.currentTarget`
阻止默认行为	`event.preventDefault()`
阻止事件传播	`event.stopPropagation()`
彻底阻止事件	`event.stopImmediatePropagation()`
获取鼠标坐标	`event.clientX / clientY`
推荐程度	✅ 所有开发者必须掌握