js event对象

// 示例代码：使用 event 对象处理点击事件

// HTML 部分
/*
<button id="myButton">点击我</button>
*/

// JavaScript 部分
document.getElementById('myButton').addEventListener('click', function(event) {
    // event 对象包含了与事件相关的信息和方法

    // 阻止默认行为（如果有的话）
    event.preventDefault();

    // 获取触发事件的元素
    console.log('触发事件的元素:', event.target);

    // 获取事件的类型
    console.log('事件类型:', event.type);

    // 获取鼠标点击位置的坐标
    console.log('鼠标点击位置 (X, Y):', event.clientX, event.clientY);

    // 检查是否按下了某个修饰键（例如 Ctrl 或 Shift）
    if (event.ctrlKey) {
        console.log('Ctrl 键被按下');
    }

    // 停止事件冒泡
    event.stopPropagation();
});

// 解释说明：
// 1. `event` 对象是事件处理器函数的第一个参数，它包含了与事件相关的信息。
// 2. `event.target` 返回触发事件的 DOM 元素。
// 3. `event.type` 返回事件的类型（如 'click'）。
// 4. `event.clientX` 和 `event.clientY` 返回鼠标相对于视口的位置。
// 5. `event.ctrlKey` 等属性可以检查是否按下了特定的修饰键。
// 6. `event.preventDefault()` 可以阻止默认行为（如链接跳转）。
// 7. `event.stopPropagation()` 可以阻止事件冒泡，即阻止事件向父元素传播。