Dom事件进阶-事件流

事件流与两个阶段说明

事件流指的是事件完整执行过程中的流动路径

说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

捕获阶段是 从父到子 冒泡阶段是从子到父

实际工作都是使用时间冒泡为主

事件捕获（了解）

从DOM的根元素开始去执行对应的事件 (从外到里)

DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)

• 说明：
  • addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
  • 若传入false代表冒泡阶段触发，默认就是false
  • 若使用L0事件监听，则只有冒泡阶段，没有捕获

事件冒泡

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件

事件冒泡是默认存在的

L2事件监听第三个参数是 false，或者默认都是冒泡

<div class="father">
    <div class="son"></div>
</div>
<script>
    const fa = document.querySelector('.father')
    const son = document.querySelector('.son')
    // 山东  济南  蓝翔   目标（pink老师）  捕获阶段
    //  蓝翔  济南   山东   冒泡阶段
    document.addEventListener('click', function () {
      alert('我是爷爷')
    }, true)
    fa.addEventListener('click', function () {
      alert('我是爸爸')
    }, true)
    son.addEventListener('click', function () {
      alert('我是儿子')
    }, true)

</script>

阻止冒泡

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

若想把事件就限制在当前元素内，就需要阻止事件冒泡

阻止事件冒泡需要拿到事件对象

阻止冒泡

语法：事件对象.stopPropagation()

注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

阻止表单默认提交行为

某些情况下需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转

语法：e.preventDefault()

两种注册事件的区别

传统on注册（L0）

1. 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)

2. 直接使用null覆盖偶就可以实现事件的解绑

3. 都是冒泡阶段执行的

事件监听注册（L2）

1. 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)

2. 后面注册的事件不会覆盖前面注册的事件(同一个事件)

3. 可以通过第三个参数去确定是在冒泡或者捕获阶段执行

4. 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)

5. 匿名函数无法被解绑