dom事件流和事件相关操作

事件流顺序

事件流是网页元素接收事件的顺序，“DOM2级事件”规定的事件流包括三个阶段：

• 事件捕获阶段
• 处于目标阶段
• 事件冒泡阶段

首先发生事件捕获，为截获事件提供机会，然后是实际的目标接受事件，最后一个阶段是事件冒泡阶段，

事件捕获

const dom = document.getElementById('#main')
dom.addEventListener('click', (event) => {
  console.log(event)
}, true)

如何组件事件捕获

function myEvent(event) {
  event.stopImmediatePropagation()
}

事件冒泡

const dom = document.getElementById("#main")
dom.addEventListener('click', (event) => {
  console.log(event)
}, false)

如何阻止事件冒泡

function myEvent(event) {
  event.stopPropagation()
}

当容器元素及嵌套元素，即在捕获阶段又在冒泡阶段调用事件处理程序时：事件按dom事件流的顺序执行事件处理程序：

• 父级捕获
• 子级捕获
• 子级冒泡
• 父级冒泡

事件是如何实现的

基于发布订阅模式，就是在浏览器加载的时候会读取事件相关的代码，但是只有实际等到具体的事件触发的时候才执行

在web端，我们常见的就是DOM事件

• DOM0级事件，直接在html元素上绑定on-event，比如onclick，取消的话，dom.onclick = null, 同一个事件只能有一个处理程序，后面的会覆盖前面的
• DOM2级事件，通过addEventListener进行事件监听，通弄过removeEventListener来删除事件，一个事件可以有多个事件处理程序，按顺序执行，捕获事件和冒泡事件
• DOM3级事件，增加了事件类型，比如UI事件，焦点事件，鼠标事件

事件委托

事件委托可以减少事件的监听，优化操作性能，其原理是利用事件冒泡，给父级一个事件监听，点击级子元素冒泡到父元素的事件，然后判断当前点击的event元素类型，获取想要的值