JavaScript 常用事件总结汇总
JavaScript 事件是网页交互的核心，以下是常用事件的分类总结：
鼠标事件
click - 元素被点击时触发
dblclick - 元素被双击时触发
mouseenter - 鼠标进入元素时触发（不冒泡）
mouseleave - 鼠标离开元素时触发（不冒泡）
mouseover - 鼠标进入元素或其子元素时触发（冒泡）
mouseout - 鼠标离开元素或其子元素时触发（冒泡）
mousemove - 鼠标在元素内移动时触发
mousedown - 鼠标按钮在元素上按下时触发
mouseup - 鼠标按钮在元素上释放时触发
contextmenu - 右键点击打开上下文菜单时触发
键盘事件
keydown - 键盘按键按下时触发
keyup - 键盘按键释放时触发
keypress - 键盘按键按下并释放时触发（已废弃，推荐使用 keydown/keyup）
表单事件
submit - 表单提交时触发
reset - 表单重置时触发
change - 表单元素值改变并失去焦点时触发（如 input, select, textarea）
input - 表单元素值改变时实时触发
focus - 元素获得焦点时触发
blur - 元素失去焦点时触发
select - 文本被选中时触发（如 input 或 textarea）
窗口事件
load - 页面或资源加载完成时触发
DOMContentLoaded - HTML 文档完全加载和解析后触发（不等待样式表、图像等）
resize - 窗口大小改变时触发
scroll - 元素滚动时触发
beforeunload - 页面即将卸载前触发（常用于防止意外离开）
unload - 页面卸载时触发
触摸事件（移动端）
touchstart - 手指触摸屏幕时触发
touchmove - 手指在屏幕上滑动时触发
touchend - 手指从屏幕离开时触发
touchcancel - 触摸被意外中断时触发（如来电）
其他常用事件
copy - 用户复制内容时触发
cut - 用户剪切内容时触发
paste - 用户粘贴内容时触发
transitionend - CSS 过渡完成时触发
animationstart - CSS 动画开始时触发
animationend - CSS 动画结束时触发
animationiteration - CSS 动画重复播放时触发
事件绑定方式
// 1. HTML属性方式
<button onclick="handleClick()">Click me</button>// 2. DOM属性方式
element.onclick = function() { /*...*/ };// 3. addEventListener (推荐)
element.addEventListener('click', function(e) {// 事件处理逻辑e.preventDefault(); // 阻止默认行为e.stopPropagation(); // 阻止事件冒泡
});// 移除事件监听
element.removeEventListener('click', handlerFunction);事件对象常用属性和方法
target- 触发事件的元素currentTarget- 绑定事件的元素type- 事件类型（如 "click"）preventDefault()- 阻止默认行为stopPropagation()- 阻止事件冒泡stopImmediatePropagation()- 阻止同一事件的其他监听器被调用clientX/clientY- 鼠标相对于视口的坐标key- 按下的键盘按键值
事件委托示例
// 利用事件冒泡，在父元素上处理子元素的事件
document.getElementById('parent').addEventListener('click', function(e) {if(e.target.matches('button.child')) {console.log('子按钮被点击');}
});掌握这些事件可以满足大多数网页交互开发需求。根据具体场景选择合适的事件类型和绑定方式。