从简单到复杂：JavaScript 事件处理的全方位解读

在这里插入图片描述

基础语法

事件机制是指当用户在DOM元素上执行特定操作（例如点击按钮、移动鼠标等）时，会触发相应的事件。JavaScript通过监听这些事件，并将对应的处理函数绑定到事件上，从而对用户的交互做出响应。

// 1. HTML属性方式（内联方式）
<div class="event-box" onclick="alert('HTML属性方式')">HTML属性方式</div>// 2. DOM属性方式绑定事件
<div class="event-box" id="domPropertyBox">DOM属性方式</div>
domPropertyBox.onclick = function () {logEvent('DOM属性方式触发了点击事件')
}// 3. addEventListener方式绑定事件（推荐）
<div class="event-box" id="listenerBox">addEventListener方式</div>
listenerBox.addEventListener('click', function () {logEvent('addEventListener方式触发了点击事件')
})

不同事件绑定方式的特性如下：

特性	HTML属性方式	DOM属性方式	addEventListener
多个事件处理器	❌	❌	✅
控制事件阶段	❌ (只冒泡)	❌ (只冒泡)	✅ (可选捕获/冒泡)
移除事件	困难	设置为null	removeEventListener
代码组织	混合在HTML中	分离	完全分离
this指向	window	元素本身	元素本身

可列举的事件类型：

事件类型	事件名称	描述
鼠标事件	click	单击事件
dblclick	双击事件
contextmenu	右键点击事件
mousedown	鼠标按下事件
mouseup	鼠标释放事件
mouseover	鼠标移入元素事件
mouseout	鼠标移出元素事件
mousemove	鼠标在元素上移动事件
键盘事件	keydown	键盘按键按下事件
keyup	键盘按键释放事件
keypress	键盘按压事件（字符键）
表单事件	submit	表单提交事件
reset	表单重置事件
focus	获得焦点事件
blur	失去焦点事件
input	输入内容变化事件
change	内容改变且失去焦点事件
拖放事件	dragstart	开始拖动元素
drag	拖动元素过程中
dragend	拖动操作结束
dragenter	拖动元素进入目标区域
dragover	拖动元素在目标区域上方
dragleave	拖动元素离开目标区域
drop	在目标区域放置被拖元素
滚动事件	scroll	元素或文档被滚动
剪贴板事件	copy	复制操作
cut	剪切操作
paste	粘贴操作
触摸事件 (移动端)	touchstart	触摸开始
touchmove	触摸移动
touchend	触摸结束
touchcancel	触摸被系统中断
窗口/文档事件	resize	窗口大小改变
load	页面加载完成

事件捕获与冒泡

在JavaScript中，事件的传播过程遵循事件流机制，事件流的顺序包括捕获和冒泡两种方式。整个事件流可以分为三个阶段：首先是 捕获阶段，然后是 目标阶段，最后是 冒泡阶段。事件捕获和事件冒泡是处理DOM事件的两种不同机制。

在这里插入图片描述

事件捕获是从最外层的元素开始，逐步向内传播到目标元素。例如：从window到document，再到html、body，最终到达div
事件冒泡则是从目标元素开始，逐步向外传播到最外层的元素。例如：从div到body，再到html、document，最终到达window

element.addEventListener(event, handler, useCapture);
// event：具体的事件
// handler：处理的函数
// 指定什么事件：默认为false，事件在冒泡阶段处理event.preventDefault() // 阻止浏览器对事件的默认行为，
// 如：阻止链接的跳转、表单的提交、输入框的默认行为
event.stopPropagation() //阻止事件冒泡，同级不阻止
event.stopImmediatePropagation() //阻止事件冒泡，同级阻止

案例如下
在这里插入图片描述

事件委托

事件委托（Event Delegation） 是一种基于事件冒泡机制的优化技术。它允许我们将事件监听器添加到父元素，而不是直接添加到多个子元素上。
当子元素的事件被触发时，事件会冒泡到父元素，然后由父元素上的监听器处理。通过检查事件的target属性，我们可以确定哪个具体的子元素触发了事件。

//事件代理  节约内存 提升性能(不需要注销子节点)
let ul = document.getElementById("ul");
ul.addEventListener("click", (event) => {console.log(event.target.innerHTML);
})

案例如下

在这里插入图片描述

特性	事件委托	直接绑定
内存使用	✅ 低（只有一个事件监听器）	❌ 高（每个元素一个监听器）
初始化时间	✅ 快（只需绑定一次）	❌ 慢（需要为每个元素绑定）
动态元素处理	✅ 自动支持新添加的元素	❌ 需要手动为新元素绑定事件
事件处理时间	⚠️ 稍慢（需要遍历确定目标元素）	✅ 稍快（直接知道目标元素）
代码复杂度	✅ 简洁	❌ 冗余
元素移除	✅ 不需要手动解绑	❌ 需要手动解绑避免内存泄漏
点击性能测试	⚠️ 稍慢（需要判断目标元素）	✅ 稍快（直接绑定到目标元素）