一、事件流
- 事件流指的是事件完整执行过程中的流动路径
- 当触发事件时，会经历三个阶段，分别是捕获阶段、目标阶段、冒泡阶段
- 事件捕获概念：
- 当一个元素的事件被触发时，会从DOM的根元素开始依次调用同名事件 (从外到里)
1.事件捕获
- 事件捕获需要写对应代码才能看到效果
DOM.addEventlistener(事件类型，事件处理函数，是否使用捕获机制)- 说明：
- addEventListener第三个参数传入 true 代表是捕获阶段触发
- 若传入false代表冒泡阶段触发，默认就是 false
- 事件捕获 ==> 从外到内
2.事件冒泡
- 事件流默认为冒泡阶段。
- 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
- 当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
- 事件冒泡是默认存在的，或者第三个参数传入 false 都是冒泡
- 事件捕获 ==> 从内到外
阻止冒泡
- 语法：
事件对象.stopPropagation() - 问题： 因为默认就有冒泡阶段的存在，所以容易导致事件影响到父级元素
- 若想把事件就限制在当前元素内，就需要阻止事件冒泡
- 前提： 阻止事件冒泡需要拿到事件对象 （e）
- 注意： 此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
- 它阻止的是事件的传播，不会阻止代码的运行
事件委托
-
事件委托(Event Delegation)：是JavaScript中注册事件的常用技巧，也称为事件委派、事件代理
-
原本需要注册在子元素的事件委托给父元素，让父元素担当事件监听的职务
-
如果同时给多个元素注册事件，还需要利用循环多次注册事件，如果用事件委托可减少注册次数，提高程序性能。
-
事件委托是利用事件流的特征解决一些开发需求的知识技巧
-
优点： 减少注册次数，可以提高程序性能
-
原理: 事件委托其实是利用事件冒泡的特点;给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
-
事件对象.target.tagName可以获得真正触发事件的元素(返回的元素为大写) -
示例：
-
-
需求： 点击每一个li, 让点击的那个li标签文字颜色变为橘色，只能给li绑定事件。
-
-
事件委托的原理：利用事件冒泡，将事件监听绑定到父元素上，通过父元素来监听子元素的事件
-
事件委托的好处：减少注册事件的次数，提高程序性能
-
触发事件的元素，我们可以通过e.target.tagName 来判断具体哪个标签
-
