JavaScript 事件对象（Event）
JavaScript 事件对象（Event）
一、什么是事件对象
在 JavaScript 里，当事件（像点击、键盘输入等）触发时，浏览器会自动生成一个事件对象。此对象包含了与该事件相关的各种信息，借助它，你可以深入了解事件发生的具体情况并进行相应处理。
二、获取事件对象
在事件处理函数被调用时，浏览器会自动把事件对象当作参数传递给这个函数。以下是获取事件对象的基本方式：
<script>
document.addEventListener('click', function(event) {
// 这里的 event 就是事件对象
console.log(event);
});
</script>
在这个例子中，当文档被点击时，click 事件触发，浏览器会把事件对象作为参数传递给事件处理函数，然后通过 console.log 输出该事件对象如下：
click { target: html, buttons: 0, clientX: 109, clientY: 112, layerX: 109, layerY: 112 }
三、事件对象的常用属性
1. type 属性
type 属性的作用是返回事件的类型，比如 click、keydown 等。
<script>
document.addEventListener('click', function(event) {
console.log(event.type); // 输出 'click'
});
</script>
上述代码里，当点击文档时，event.type 会输出 click，表明这是一个点击事件。
2. target 属性
target 属性指向触发事件的实际元素。
<!DOCTYPE html>
<html lang="en">
<body>
<button id="myButton">点击我</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log(event.target); // 输出按钮元素<button>
});
</script>
</body>
</html>
在这个示例中，当点击按钮时，event.target 会返回按钮元素本身。
3. clientX 和 clientY 属性
clientX 和 clientY 属性分别表示鼠标事件发生时，鼠标指针相对于浏览器窗口可视区域的水平和垂直坐标。
<!DOCTYPE html>
<html lang="en">
<body>
<div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;"></div>
<p>请在蓝色区域内移动鼠标指针。</p>
<p>鼠标位置: (0, 0)</p>
<script>
const div = document.getElementById('myDiv');
div.addEventListener('mousemove', function (event) {
console.log(event.clientX, event.clientY);
const textContent = `鼠标位置: (${event.clientX}, ${event.clientY})`;
document.querySelector('p:nth-of-type(2)').textContent = textContent;
});
</script>
</body>
</html>
当鼠标在 div 元素内移动时，会不断输出鼠标指针相对于浏览器窗口可视区域的坐标。
4. layerX 和 layerY 属性
layerX 和 layerY 属性分别表示鼠标事件发生时，鼠标指针相对于 事件源元素（最内层触发事件的元素） 的 父级定位元素 的水平和垂直坐标。
其坐标原点以 定位元素（如设置了 position: relative/absolute/fixed 的祖先元素） 的左上角为 (0, 0)。 若元素没有定位祖先，则相对于 文档根元素（）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
</head>
<body>
<div style="position: relative; width: 200px; height: 200px; background: lightblue;">
<div id="child" style="width: 100px; height: 100px; background: lightcoral;"></div>
</div>
<script>
const child = document.getElementById('child');
child.addEventListener('click', function (event) {
// 若父级 div 有 position: relative，则坐标相对于父级左上角
console.log(`layerX: ${event.layerX}, layerY: ${event.layerY}`);
});
</script>
</body>
</html>
四、事件对象的常用方法
1. preventDefault() 方法
preventDefault() 方法用于阻止事件的默认行为。例如，阻止链接的默认跳转行为：
<!DOCTYPE html>
<html lang="en">
<body>
<a href="https://www.example.com" id="myLink">点击我跳转</a>
<script>
const link = document.getElementById('myLink');
link.addEventListener('click', function(event) {
event.preventDefault(); // 阻止链接跳转
console.log('链接跳转被阻止');
});
</script>
</body>
</html>
在这个例子中，当点击链接时，event.preventDefault() 会阻止链接的默认跳转行为，并在控制台输出相应信息。
2. stopPropagation() 方法
stopPropagation() 方法用于阻止事件的冒泡或捕获。事件冒泡是指事件从内向外传播，而事件捕获是从外向内传播。
<!DOCTYPE html>
<html lang="en">
<body>
<div id="outer" style="width: 200px; height: 200px; background-color: lightblue;">
<div id="inner" style="width: 100px; height: 100px; background-color: lightcoral;"></div>
</div>
<script>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
outer.addEventListener('click', function() {
console.log('外层 div 被点击');
});
inner.addEventListener('click', function(event) {
event.stopPropagation(); // 阻止事件冒泡
console.log('内层 div 被点击');
});
</script>
</body>
</html>
在这个示例中，当点击内层 div 时，event.stopPropagation() 会阻止事件冒泡到外层 div，因此只会输出 “内层 div 被点击”。
五、事件对象的兼容性问题
在旧版本的 Internet Explorer 中，事件对象的获取方式和现代浏览器不同。它不是作为参数传递给事件处理函数，而是通过 window.event 来获取。为了保证代码的兼容性，可以采用以下方式：
<script>
document.addEventListener('click', function(event) {
event = event || window.event; // 兼容旧版本 IE
console.log(event);});
</script>
通过这种方式，无论在现代浏览器还是旧版本的 Internet Explorer 中，都能正确获取事件对象。
六、总结
事件对象在 JavaScript 事件处理中非常重要，它可以让你获取事件的详细信息并进行相应处理。通过掌握事件对象的常用属性和方法，你可以更灵活地处理各种事件。