一、事件
下面会将js的事件的所有内容讲清楚
JavaScript 中的事件处理是前端开发中非常核心的概念之一。了解事件的工作原理、处理机制以及常见的难点，能够帮助你更好地编写交互式应用程序。以下是关于 JavaScript 事件的详细讲解，包括基本概念、常见事件、事件流、事件处理器、事件委托、冒泡与捕获等内容。
1. JavaScript 事件基本概念
事件是用户与网页交互时所触发的行为，例如点击按钮、移动鼠标、键盘输入等。这些事件通常会触发一个回调函数（事件处理程序），以响应用户的行为。
常见的事件类型：
鼠标事件：
click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout键盘事件：
keydown、keypress、keyup表单事件：
submit、change、focus、blur加载事件：
load、DOMContentLoaded、beforeunload、unload触摸事件：
touchstart、touchmove、touchend、touchcancel
2. 事件模型
2.1 事件流（Event Flow）
JavaScript 中的事件流主要有两个阶段：
捕获阶段（Capturing Phase）：事件从根节点（
document或window）向事件目标元素传播。目标阶段（Target Phase）：事件到达目标元素，触发目标元素的事件处理程序。
冒泡阶段（Bubbling Phase）：事件从目标元素向根节点传播。
事件流的顺序：
捕获阶段：从根节点到目标元素。
目标阶段：事件到达目标元素。
冒泡阶段：从目标元素向上冒泡到根节点。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
2.2 事件捕获（Event Capturing）
事件捕获与冒泡相反，事件会从最外层（根节点）开始向内层元素传播。虽然默认情况下是事件冒泡，但你可以通过 addEventListener 的第三个参数来启用事件捕获。
document.getElementById('parent').addEventListener('click', function() {
alert('Parent clicked');
}, true); // 第三个参数为 true 启用捕获
在捕获阶段，事件从根节点开始向目标元素传播。
2.3 事件冒泡（Event Bubbling）
事件冒泡是指事件从目标元素开始向外层元素传播。默认情况下，事件会在冒泡阶段向父元素传播，直到到达 document 或 window。
document.getElementById('child').addEventListener('click', function() {
alert('Child clicked');
});
document.getElementById('parent').addEventListener('click', function() {
alert('Parent clicked');
});
如果点击 child 元素，会先触发 child 的点击事件，再触发 parent 的点击事件（事件冒泡）。
3. 事件处理程序（Event Handlers）
3.1 添加事件监听器
可以使用 addEventListener() 方法来为 DOM 元素添加事件监听器。
let button = document.querySelector('button');
button.addEventListener('click', function() {
alert('Button clicked');
});addEventListener(type, listener, options)：
type：事件类型，如click、keyup等。listener：事件处理函