Dom事件概述

tai-xiaodong 2022.2.2 饥人谷

什么是Dom事件

• 由于javaScript是一种轻量化的语言，所有宿主环境提供一些API来让js操作，从而实现一些功能 期中Dom就是浏览器提供的一种Api，主要用来操作网页的各种元素
• DOM结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播， 路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件。
• DOM同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。 两种事件流会触发DOM中的所有对象，从document对象开始，也在document对象结束。

捕获和冒泡

1. W3C标准规定，浏览器需要同时支持捕获和冒泡两种调用顺序
2. 首先按照从外到内（祖先元素 --> 父元素-->子元素 逐层深入）的顺序查看有没有事件监听，捕获在前
3. 然后按照从内到外（子元素 --> 父元素 --> 祖先元素）的顺序来查看有没有事件监听，冒泡在后
4. 有则调用相关函数并提供事件信息，无则跳过
5. 开发者可以自己决定将监听函数放在捕获阶段还是冒泡阶段

使用方法

div.addEventListener('click',fn,bool) //不填bool默认为冒泡，TRUE表示捕获

//如果bool不传值，或者为falsy值，就让fn走冒泡，即当浏览器在冒泡阶段发现监听函数，就调用fn，并提供事件信息
//如果bool值为true，就让fn走捕获，即当浏览器在捕获阶段发现监听函数，就调用fn，并提供事件信息
//

target

target 就是用户操作的元素
currentTarget  就是程序员监听的元素
stopPropagation 阻止捕获和冒泡阶段中当前事件的进一步传播。