【博学谷学习记录】超强总结用心分享|前端学习w9-javascript-Dom事件委托等ok 本周复习一下dom事件委

ok 本周复习一下dom事件委托相关内容

事件流

事件流与两个阶段说明

1、事件流指的是事件完整执行过程中的流动路径，会经历两个阶段，分别是捕获阶段、冒

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

事件捕获

事件捕获概念：

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

事件捕获需要写对应代码才能看到效果

代码：

微信截图_20221121143552.png

-addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）

-若传入false代表冒泡阶段触发，默认就是false

-若是用 L0 事件监听，则只有冒泡阶段，没有捕获

事件冒泡

事件冒泡概念:

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

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

事件冒泡是默认存在的

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

微信截图_20221121144015.png

阻止冒泡

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

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

 前提：阻止事件冒泡需要拿到事件对象

 <script>
    const fa = document.querySelector('.father')
    const son = document.querySelector('.son')
    // 山东  济南  蓝翔   目标（pink老师）  捕获阶段
    //  蓝翔  济南   山东   冒泡阶段
    document.addEventListener('click', function () {
      alert('我是爷爷')
    })
    fa.addEventListener('click', function () {
      alert('我是爸爸')
    })
    son.addEventListener('click', function (e) {
      alert('我是儿子')
      // 组织流动传播  事件对象.stopPropagation()
      e.stopPropagation()
    })

  </script>

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

 <script>
    const form = document.querySelector('form')
    form.addEventListener('submit', function (e) {
      // 阻止默认行为  提交
      e.preventDefault()
    })

    const a = document.querySelector('a')
    a.addEventListener('click', function (e) {
      e.preventDefault()
    })
  </script>

解绑事件

1、on事件方式，直接使用null覆盖偶就可以实现事件的解绑

微信截图_20221121144421.png

2、addEventListener方式，必须使用：

removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])

匿名函数无法被解绑

例如

微信截图_20221121144455.png

鼠标经过事件：

 mouseover 和 mouseout 会有冒泡效果

 mouseenter 和 mouseleave 没有冒泡效果 (推荐)

事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

 优点：减少注册次数，可以提高程序性能

 原理：事件委托其实是利用事件冒泡的特点。

 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

 实现：事件对象.target. tagName 可以获得真正触发事件的元素

微信截图_20221121152453.png

ok 下周继续努力学习，不能犯懒咯

【博学谷学习记录】超强总结 用心分享|前端学习w9-javascript-Dom事件委托等

事件流