当前位置：首页 > news >正文

JavaScript 事件常用属性

news 来源：原创 2025/6/25 12:43:16

一、事件对象基础
在事件处理函数中，浏览器会自动传入一个 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);
});

相关文章：