e 是一个变量名，它通常作为事件对象（Event Object）的引用，被传递给事件处理函数，虽然你可以给它起任何名字（event, evt, clickInfo），但 e 是业界最通用、最简洁的约定。
e 是什么？—— 事件对象
当你与一个网页元素进行交互时（比如点击一个按钮、移动鼠标、按下键盘），浏览器会创建一个“事件对象”,这个对象包含了与该事件相关的所有信息。
e 就是你用来接收这个事件对象的“容器”或“引用”。
为什么需要它？
因为事件处理函数（onclick）默认接收这个事件对象作为第一个参数，即使你在函数定义中没有写 e，这个对象依然存在（在旧浏览器中，它会作为 window.event 存在），但为了能访问它,你必须声明一个参数来接收它。
e 的常见用途
e 对象非常有用,以下是几个最常见的用途：
用途 1：阻止默认行为
这是 e 最常见的用途之一，某些 HTML 元素有自己默认的行为。
- 点击一个
<a>链接,默认会跳转到新页面。 - 点击一个
<form>表单里的<submit>按钮,默认会提交表单并刷新页面。
如果你想用 JavaScript 来接管这个行为,就需要阻止它。
示例：阻止链接跳转
<a href="https://www.google.com" id="myLink">点击我，但不要跳转！</a>
<script>
const link = document.getElementById('myLink');
link.addEventListener('click', function(e) {
// e.preventDefault() 会阻止元素的默认行为
e.preventDefault();
alert('链接的默认跳转行为已被阻止！');
});
</script>
代码解释：
- 我们给链接添加了一个
click事件监听器。 - 当链接被点击时，事件对象
e被传递给匿名函数。 e.preventDefault()调用了事件对象的一个方法，告诉浏览器：“请不要执行你本来要做的事情（即跳转）”。
用途 2：阻止事件冒泡
事件在 DOM 中传播的方式是“冒泡”，当一个元素上的事件被触发时，它会先在该元素上处理，然后逐级向上传播到它的父元素，直到 <html> 元素。
示例：点击按钮，阻止事件冒泡到父容器
<div id="parentDiv" style="padding: 20px; background-color: lightblue;">
这是一个父容器
<button id="childButton">点击我</button>
</div>
<script>
const parent = document.getElementById('parentDiv');
const button = document.getElementById('childButton');
parent.addEventListener('click', function() {
alert('父容器被点击了！');
});
button.addEventListener('click', function(e) {
alert('按钮被点击了！');
// e.stopPropagation() 会阻止事件向上冒泡
e.stopPropagation();
});
</script>
代码解释：
- 我们给父容器
div和子元素button都添加了click事件监听器。 - 当你点击按钮时，会先触发按钮的事件，显示“按钮被点击了！”。
- 因为
e.stopPropagation()的存在，事件不会继续向上传播到父容器，父容器被点击了！”这个提示框不会出现。
用途 3：获取事件目标
有时候你不知道具体是哪个子元素触发了事件,或者你想获取触发事件的元素本身。
示例：动态为列表项添加点击事件
<ul id="myList">
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ul>
<script>
const list = document.getElementById('myList');
// 只给 ul 添加一个事件监听器
list.addEventListener('click', function(e) {
// e.target 指向触发事件的原始元素（在这里是 <li>）
// e.currentTarget 指向绑定事件的元素（在这里是 <ul>）
if (e.target.tagName === 'LI') {
alert(`你点击了: ${e.target.textContent}`);
}
});
</script>
代码解释：
- 我们只给
<ul>绑定了事件，而不是给每一个<li>单独绑定（这更高效）。 - 当你点击某个
<li>时，事件冒泡到<ul>。 e.target帮我们精确地找到了被点击的那个<li>元素。e.currentTarget则始终是list这个变量指向的<ul>元素。
用途 4：获取鼠标位置
对于鼠标事件（如 click, mousemove），e 对象还包含鼠标位置信息。
<div id="mouseArea" style="height: 200px; background-color: #f0f0f0; border: 1px solid #ccc;">
在这个区域内移动鼠标或点击。
</div>
<p id="coordinates"></p>
<script>
const area = document.getElementById('mouseArea');
const coordsDisplay = document.getElementById('coordinates');
area.addEventListener('mousemove', function(e) {
// e.clientX 和 e.clientY 是相对于视口（浏览器窗口）的坐标
coordsDisplay.textContent = `鼠标位置: X: ${e.clientX}, Y: ${e.clientY}`;
});
area.addEventListener('click', function(e) {
// e.pageX 和 e.pageY 是相对于整个文档的坐标（考虑滚动）
alert(`点击位置（相对于文档）: X: ${e.pageX}, Y: ${e.pageY}`);
});
</script>
代码解释：
e.clientX/e.clientY: 鼠标指针在浏览器视口中的水平和垂直坐标。e.pageX/e.pageY: 鼠标指针在整个 HTML 文档中的水平和垂直坐标，如果页面有滚动,它会包含滚动距离。
e 的其他常见名称
虽然 e 是最流行的，但你也会看到其他名字,它们完全等价：
event: 最具描述性的名字,非常清晰。evt:event的简写,也很常见。clickEvent,keyEvent: 更具体的名字,但较少用于通用处理函数。
示例：
// 这三种写法功能完全相同
element.addEventListener('click', function(e) { /* ... */ });
element.addEventListener('click', function(event) { /* ... */ });
element.addEventListener('click', function(evt) { /* ... */ });
在不同事件绑定方式中的使用
现代 DOM 事件监听器 (推荐)
这是目前最标准、最灵活的方式。
button.addEventListener('click', function(e) {
console.log(e); // 这里 e 是有效的事件对象
});
旧式 HTML 属性 (不推荐)
这种方式也能拿到事件对象，但语法有些奇怪,且不推荐使用。
<button onclick="handleClick(event)">点击我</button>
<script>
function handleClick(e) {
console.log(e); // e 也是一个有效的事件对象
}
</script>
注意： 在 HTML 属性中，你必须显式地写出 event 这个名字作为参数，而不是 e。
旧式 DOM 0 级事件 (不推荐)
这种方式在函数内部无法直接获取标准的事件对象，需要通过 window.event 来获取,兼容性较差。
button.onclick = function() {
// 在非 IE 浏览器中，需要这样获取
const e = window.event || arguments[0];
console.log(e);
};
| 特性 | 描述 |
|---|---|
| 本质 | e 是一个变量名，用于接收事件对象。 |
| 约定 | e 是最常用、最简洁的约定。event 或 evt 也可以。 |
| 核心作用 | 访问与事件相关的数据和行为，如： - e.preventDefault(): 阻止默认行为。- e.stopPropagation(): 阻止事件冒泡。- e.target: 获取触发事件的原始元素。- e.currentTarget: 获取绑定事件的元素。- e.clientX, e.clientY: 获取鼠标位置。 |
| 最佳实践 | 始终使用现代的 addEventListener 方法，并在回调函数中声明 e 参数，以便随时使用它强大的功能。 |
理解 e 参数是掌握 JavaScript 事件驱动编程的关键一步，它让你能够编写出更强大、更精确、更优雅的交互式网页。
