JavaScript 事件常用属性

一、事件对象基础
在事件处理函数中，浏览器会自动传入一个 event 对象，它包含了与事件相关的所有信息。

element.addEventListener('click', function(event) {
    // event 是事件对象
});

二、常见事件属性
属性名    类型    描述
type    String    事件类型，如 'click', 'keydown' 等。
target    Element    触发事件的原始元素（事件目标）。
currentTarget    Element    当前正在执行事件处理程序的元素（绑定事件的元素）。
bubbles    Boolean    表示事件是否冒泡。
cancelable    Boolean    表示是否可以取消事件默认行为。
defaultPrevented    Boolean    是否调用了 preventDefault()。
isTrusted    Boolean    判断事件是否是用户触发的（非脚本模拟）。
timeStamp    Number    事件触发的时间戳（从页面加载开始计算的毫秒数）。
三、鼠标事件特有属性
属性名    类型    描述
clientX / clientY    Number    鼠标指针相对于视口的位置。
pageX / pageY    Number    鼠标指针相对于整个页面的位置（含滚动条偏移）。
screenX / screenY    Number    鼠标指针相对于屏幕的位置。
button    Number    被点击的鼠标按键（0=左键, 1=滚轮, 2=右键）。
buttons    Number    按下的是哪些按钮（可用于拖拽等场景）。
四、键盘事件特有属性
属性名    类型    描述
key    String    按下的实际字符或功能键名称（推荐使用）。
code    String    物理按键代码（不随语言布局变化），如 'KeyA', 'ArrowUp'。
keyCode    Number    已废弃，表示按键的 ASCII 编码。
which    Number    同 keyCode，用于兼容旧浏览器。
shiftKey / ctrlKey / altKey / metaKey    Boolean    是否按下了对应的修饰键。
五、事件控制方法
方法    描述
preventDefault()    阻止事件的默认行为（如阻止链接跳转）。
stopPropagation()    阻止事件继续传播（停止冒泡）。
stopImmediatePropagation()    不仅阻止冒泡，还阻止当前元素上其他监听器的执行。
六、事件流阶段（eventPhase）
表示事件当前所处的阶段：

Event.CAPTURING_PHASE (1): 捕获阶段
Event.AT_TARGET (2): 目标阶段
Event.BUBBLING_PHASE (3): 冒泡阶段
七、自定义事件
使用 CustomEvent 可以创建并派发自定义事件：

const event = new CustomEvent('myEvent', {
    detail: { message: 'Hello World' }
});

element.dispatchEvent(event);

八、移动端触摸事件属性
属性名    描述
touches    当前屏幕上所有触摸点的列表（TouchList）。
targetTouches    当前元素上的触摸点。
changedTouches    引起事件改变的触摸点（如刚触碰或离开的）。
九、事件委托
利用事件冒泡机制，在父元素上统一处理子元素的事件。

document.getElementById('parent').addEventListener('click', function(e) {
    if (e.target.matches('.child')) {
        console.log('Clicked on child:', e.target);
    }
});

十、注意事项
使用 event.target 来获取真正被点击/触发的元素。
使用 event.currentTarget 获取绑定事件监听的元素。
在事件委托中尤其要注意区分两者。
避免滥用 event.preventDefault() 和 event.stopPropagation()，以免影响用户体验或其他模块的功能。
✅ 示例总结
 

document.addEventListener('keydown', function(e) {
    console.log('按键：', e.key);
    console.log('是否按下 Ctrl 键：', e.ctrlKey);
    console.log('事件目标：', e.target);
    console.log('事件来源元素：', e.currentTarget);
});