写在前面：各位前端小伙伴们，谁还没被Event对象坑过？
鼠标点一下、键盘按一下，浏览器偷偷塞给你的【事件小纸条】就是它！
一、先搞懂：Event对象到底是谁生的？
先解决灵魂拷问：Event对象是浏览器生的，不是JavaScript亲生的！
咱打个比方： 网页是舞台，DOM元素是演员，JS是导演，浏览器是场务。
你让演员（按钮/div）待命，等观众（用户）点击、鼠标划过时，场务（浏览器）立刻写一张小纸条。
上面记着：谁被点了？点的哪里？按了哪个键？ 这张【专属小纸条】，就是Event事件对象！
核心结论：
二、远古踩坑史：IE曾经是个【刺头】
话说当年前端圈有个噩梦——低版本IE（IE8及以下），别人都走正道，它偏要搞特殊！
- 标准浏览器（Chrome/Firefox/新版Edge）：把Event对象直接塞给事件函数，伸手就能拿。
- 低版本IE：偏不！把Event藏在
window.event 里，得自己去拿。
好在时代变了！IE早已退出历史舞台，咱们直接忽略IE写法，无痛开发，再也不用写兼容代码了，感觉有点小爽！
三、Event对象：自带4个【王炸属性+方法】
所有事件的Event对象，都有这几个通用核心属性，记住就能搞定80%场景！
| | | |
|---|
| | 事件类型（click/input/keydown） | |
| | 真正触发事件的元素 | |
| | 绑定事件的元素 | |
| | | |
| | | |
敲黑板重点：target 和 currentTarget 别搞混！
举个生活化例子： 你给爸爸（div，绑定事件） 报了个班，结果儿子（button，在div里） 替爸爸去上课了。
target = 儿子（真正去上课的）。currentTarget = 爸爸（报名的人）。
四、鼠标专属：8个坐标属性，定位神器
做拖拽、鼠标跟随、弹窗定位，全靠这8个坐标：
clientX / clientY：鼠标相对于浏览器可视窗口的坐标（滚动页面不变）。pageX / pageY：鼠标相对于整个网页的坐标（滚动页面会变）。offsetX / offsetY：鼠标相对于触发元素自身的坐标（点元素左上角就是0,0）。screenX / screenY：鼠标相对于电脑屏幕的坐标（跨显示器会变）。
五、Event事件对象 案例实战
基础Event对象用法（通用属性），案例一：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Event基础用法</title>
<style>
.father { width: 300px; height: 300px; background: #ffcccc; margin: 20px; }
.son { width: 100px; height: 100px; background: #ccccff; }
</style>
</head>
<body>
<div class="father">
我是爸爸（绑定事件）
<button class="son">我是儿子（触发事件）</button>
</div>
<a href="https://www.baidu.com" id="link">点我跳转（测试阻止默认行为）</a>
<script>
// 1. 获取元素
const father = document.querySelector('.father');
const link = document.getElementById('link');
// 2. 给爸爸绑定点击事件
father.addEventListener('click', function(e) {
// e 就是浏览器自动传过来的 Event对象！
console.log('===== 事件基础信息 =====');
console.log('事件类型：', e.type); // 输出 click
console.log('真正触发的元素（儿子）：', e.target); // button
console.log('绑定事件的元素（爸爸）：', e.currentTarget); // div
console.log('触发元素的类名：', e.target.className);
});
// 3. 测试阻止默认行为
link.addEventListener('click', function(e) {
e.preventDefault(); // 阻止a标签默认跳转
alert('哈哈！被我拦住了，跳不走了～');
});
</script>
</body>
</html>
鼠标坐标实时显示（8个属性全搞定），案例二
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>鼠标坐标Event</title>
<style>
body { height: 2000px; } /* 让页面出现滚动条，测试page坐标 */
#box { width: 400px; height: 200px; background: #e6f7ff; margin: 50px; line-height: 200px; text-align: center; }
#info { position: fixed; top: 20px; right: 20px; padding: 10px; background: #fff; border: 1px solid #ccc; }
</style>
</head>
<body>
<div id="box">我是目标元素，移动鼠标试试～</div>
<div id="info">实时坐标显示区</div>
<script>
const box = document.getElementById('box');
const info = document.getElementById('info');
// 鼠标在元素上移动时触发
box.addEventListener('mousemove', function(e) {
// 解构赋值，直接拿8个坐标属性（懒人必备）
const { clientX, clientY, offsetX, offsetY, pageX, pageY, screenX, screenY } = e;
// 实时更新页面显示
info.innerHTML = `可视窗口坐标：clientX=${clientX}， clientY=${clientY} <br>
网页整体坐标：pageX=${pageX}，pageY=${pageY} <br>
元素自身坐标：offsetX=${offsetX}，offsetY=${offsetY} <br>
屏幕坐标：screenX=${screenX}，screenY=${screenY}
`;
});
</script>
</body>
</html>
六、总结：3句话记住Event对象
- 浏览器亲生，自动传递，JS只管接。
- target是触发者，currentTarget是绑定者，别搞混。
- 坐标属性看场景：offset看元素，client看窗口，page看网页。
写在最后：Event对象就是前端的【事件翻译官】，把用户的操作翻译成浏览器能懂、JS能用的数据，吃透它，写交互、做效果直接事半功倍！下次写代码，别再把e当成玄学变量啦～
阅读原文：原文链接
该文章在 2026/3/16 10:09:25 编辑过
400 186 1886
