前端答题（五）Dom事件委托
2022.2.18 zgn
前言
- 在前端学习过程中，最早听到的一句话一定是前端html负责结构，css负责样式，js负责交互。
- 而负责和用户交互最核心的就是事件监听。
导航
- 前置知识
- 什么是事件委托？
- 怎么阻止默认动作？
- 怎么阻止事件冒泡？
一、前置知识
什么是Dom事件
- 由于javaScript是一种轻量化的语言，所有宿主环境提供一些API来让js操作，从而实现一些功能 期中Dom就是浏览器提供的一种Api，主要用来操作网页的各种元素
- DOM结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播， 路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件。
- DOM同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。 两种事件流会触发DOM中的所有对象，从document对象开始，也在document对象结束。
捕获和冒泡
- W3C标准规定，浏览器需要同时支持捕获和冒泡两种调用顺序
- 首先按照从外到内（祖先元素 --> 父元素-->子元素 逐层深入）的顺序查看有没有事件监听，捕获在前
- 然后按照从内到外（子元素 --> 父元素 --> 祖先元素）的顺序来查看有没有事件监听，冒泡在后
- 有则调用相关函数并提供事件信息，无则跳过
- 开发者可以自己决定将监听函数放在捕获阶段还是冒泡阶段
使用方法
div.addEventListener('click',fn,bool) //不填bool默认为冒泡，TRUE表示捕获 //如果bool不传值，或者为falsy值，就让fn走冒泡，即当浏览器在冒泡阶段发现监听函数，就调用fn，并提供事件信息 //如果bool值为true，就让fn走捕获，即当浏览器在捕获阶段发现监听函数，就调用fn，并提供事件信息
二、什么是Dom事件委托
-
事件委托，就是把一个元素监听事件的函数委托到另一个元素。
-
简单的做法就是把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当 事件响应到需要绑定的元素上时，会通过事件冒泡机制或者捕获机制从而触发它的外层元素的绑定事件上，然后 在外层元素上去执行函数。
-
因为，在当前div中任何一个子元素被点击，都算这个div被点击（具体执行时可以加入判断语句精确确认）
-
有什么优点？
- 1 节约监听数量
- 2 可以监听动态生成的元素。
-
三、怎么阻止默认动作？
- event.preventDefault() [](event.preventDefault - Web API 接口参考 | MDN (mozilla.org))
四、怎么阻止事件冒泡？
- event.stopPropagation
阻止捕获和冒泡阶段中当前事件的进一步传播。
但是，它不能防止任何默认行为的发生；
