事件对象 - 事件对象属性 - 常见属性介绍

在前端开发中，JavaScript 的事件处理是一个非常重要的部分。当事件被触发时，浏览器会创建一个事件对象（Event Object），这个对象包含了与该事件相关的各种信息。了解事件对象的常见属性，可以帮助我们更好地处理事件，实现更丰富的交互效果。下面就来详细介绍一些事件对象的常见属性。

1. `type` 属性

介绍

type 属性用于返回事件的类型，比如 click、mouseover、keydown 等。通过这个属性，我们可以根据不同的事件类型执行不同的操作。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button id="myButton">点击我</button>
    <script>
        const button = document.getElementById('myButton');
        button.addEventListener('click', function (event) {
            console.log('事件类型：', event.type);
        });
    </script>
</body>
</html>

解释

当点击按钮时，控制台会输出 事件类型： click，这表明当前触发的事件类型是 click。

2. `target` 属性

介绍

target 属性指向触发事件的元素。这在处理事件委托时非常有用，我们可以通过 target 属性来确定具体是哪个子元素触发了事件。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <ul id="myList">
        <li>列表项 1</li>
        <li>列表项 2</li>
        <li>列表项 3</li>
    </ul>
    <script>
        const list = document.getElementById('myList');
        list.addEventListener('click', function (event) {
            if (event.target.tagName === 'LI') {
                console.log('你点击了列表项：', event.target.textContent);
            }
        });
    </script>
</body>
</html>

解释

当点击列表中的某个列表项时，控制台会输出相应的列表项文本内容。这里通过 event.target 确定了具体是哪个列表项触发了 click 事件。

3. `currentTarget` 属性

介绍

currentTarget 属性指向绑定事件监听器的元素。与 target 不同，target 是实际触发事件的元素，而 currentTarget 是绑定事件处理函数的元素。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="outerDiv">
        <button id="innerButton">点击我</button>
    </div>
    <script>
        const outerDiv = document.getElementById('outerDiv');
        outerDiv.addEventListener('click', function (event) {
            console.log('target:', event.target.id);
            console.log('currentTarget:', event.currentTarget.id);
        });
    </script>
</body>
</html>

解释

当点击按钮时，target 会输出 innerButton，因为实际触发事件的是按钮；而 currentTarget 会输出 outerDiv，因为事件监听器是绑定在 outerDiv 上的。

4. `clientX` 和 `clientY` 属性

介绍

clientX 和 clientY 属性分别表示鼠标事件发生时，鼠标指针相对于浏览器窗口可视区域的水平和垂直坐标。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;"></div>
    <script>
        const div = document.getElementById('myDiv');
        div.addEventListener('mousemove', function (event) {
            console.log('鼠标水平坐标：', event.clientX);
            console.log('鼠标垂直坐标：', event.clientY);
        });
    </script>
</body>
</html>

解释

当鼠标在 div 元素内移动时，控制台会不断输出鼠标指针相对于浏览器窗口可视区域的水平和垂直坐标。

5. `key` 属性

介绍

key 属性用于返回触发键盘事件时按下的键的名称。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <input type="text" id="myInput">
    <script>
        const input = document.getElementById('myInput');
        input.addEventListener('keydown', function (event) {
            console.log('你按下的键是：', event.key);
        });
    </script>
</body>
</html>

解释

当在输入框中按下某个键时，控制台会输出按下的键的名称，比如 A、Enter 等。

常见属性总结

属性名	描述
`type`	返回事件的类型，如 `click`、`mouseover` 等
`target`	指向触发事件的元素，常用于事件委托
`currentTarget`	指向绑定事件监听器的元素
`clientX`	鼠标事件发生时，鼠标指针相对于浏览器窗口可视区域的水平坐标
`clientY`	鼠标事件发生时，鼠标指针相对于浏览器窗口可视区域的垂直坐标
`key`	触发键盘事件时按下的键的名称

通过掌握这些事件对象的常见属性，我们可以更加灵活地处理各种事件，实现更加丰富和交互性强的前端页面。

事件对象 - 事件对象属性 - 常见属性介绍