事件
就是发生在浏览器窗口或网页元素上的任何事情，，如点击、鼠标移动、键盘输入等。
事件对象
当事件发生时，浏览器会自动创建一个事件对象，并把它作为参数传递给事件处理函数。 这个对象包含了所有和事件相关的信息。
🌰现在页面中有一个id为myList的div标签
我们现在给它绑定一个监听器，如果div标签被点击将会触发点击事件，并打印出创建的事件对象
在页面中点击"hi"，可以看到控制台打印出了PointerEvent对象，即点击事件对象
而根据这个PointerEvent对象，我们可以知道：
- 这是一个鼠标指针事件（pointerType: "mouse"）
- 点击的位置在窗口的(9,19)处（clientX, clientY）
- 按下的按钮是左键（button: 0）
- 没有按下任何修饰键（altKey, ctrlKey, metaKey, shiftKey都为false）
- 事件是可信的（isTrusted: true），即由用户实际点击产生
- 事件的目标是div#myList
“事件流”（事件传播机制）
当一个事件被触发时，它会在DOM树中经历三个阶段：
- 捕获阶段（从 window 向下传播到目标元素）
- 目标阶段（事件到达目标元素）
- 冒泡阶段（从目标元素向上冒泡到 window）
注意：我们常用的
addEventListener默认监听冒泡阶段。设置第三个参数为true可监听捕获阶段。
实际应用：事件委托（针对于可冒泡的事件）
原理：
利用事件的冒泡阶段，我们不在每一个子元素上单独设置监听器，而是在其共同的父元素上设置一个监听器。通过判断 event.target 来识别具体是哪个子元素被触发。
🌰现在页面有三个Item
现在绑定了一个监听器到id为myList元素上，即ul标签上,如果ul标签的子元素触发了点击事件，就会冒泡到ul标签上然后触发编写的逻辑，即被点击的目标会打印“点击了，Item X”
现在按顺序点击页面中的元素触发编写逻辑
优点：
- 只需要一个监听器，性能大幅提升。
- 如果后面通过 JavaScript新添加的子元素，那新加入的子元素自动就拥有了事件响应能力，不用再为它单独绑定监听器。
