Web APIs - DOM事件进阶

X习生

已于 2024-09-12 20:02:10 修改

阅读量778

点赞数 29

分类专栏： JavaScpipt 文章标签：前端 javascript

于 2024-09-10 13:33:58 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48733159/article/details/142096458

版权

JavaScpipt 专栏收录该内容

15 篇文章

订阅专栏

Web APIs - DOM事件进阶

第8天
目标：学习事件流，事件委托，其他事件等知识，优化多个事件绑定和实现常见网页交互

事件流
移除事件监听
其他事件
元素尺寸与位置
综合案例

在这里插入图片描述

1、事件流

为什么要学习事件流？

可以帮我们解决一些疑惑，比如点击子盒子会会弹出2次的问题

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

当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

在这里插入图片描述

事件捕获概念：当一个元素的事件被触发时，会从DOM的根元素开始依次调用同名事件 (从外到里)

1.1 事件捕获

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

语法：

 元素.addEventListener('click', 回调函数， 是否使用捕获)

<body>
  <div class="father">
    父盒子
    <div class="son">子盒子</div>
  </div>
  <script>
    // 事件流
    const father = document.querySelector('.father')
    const son = document.querySelector('.son')
    // 1. 事件捕获
    // // 点击父盒子
     father.addEventListener('click', function () {
       alert('我是爸爸')
     }, true)  // 事件捕获
     // 点击子盒子
     son.addEventListener('click', function () {
       alert('我是儿子')
     }, true) // 事件捕获
  </script>
</body>

说明：

addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认就是 false

1.2 事件冒泡

事件冒泡概念:

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

简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
事件冒泡是默认存在的，或者第三个参数传入 false 都是冒泡
实际工作都是使用事件冒泡为主

<body>
  <div class="father">
    父盒子
    <div class="son">子盒子</div>
  </div>
  <script>
    // 事件流
    const father = document.querySelector('.father')
    const son = document.querySelector('.son')
    // 2. 事件冒泡
    // 点击父盒子
    father.addEventListener('click', function () {
      alert('我是爸爸')
    })
    // 点击子盒子
    son.addEventListener('click', function () {
      alert('我是儿子')
    }, false) 
  </script>
</body>

1.3 阻止冒泡

问题： 因为默认就有冒泡阶段的存在，所以容易导致事件影响到父级元素（祖先元素）

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

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

<body>
  <div class="father">
    父盒子
    <div class="son">子盒子</div>
  </div>
  <script>
    // 事件流
    const father = document.querySelector('.father')
    const son = document.querySelector('.son')
    // 1. 事件冒泡
    // 点击父盒子
    father.addEventListener('click', function () {
      alert('我是爸爸')
    })
    // 点击子盒子
    son.addEventListener('click', function (e) {
      alert('我是儿子')
      // 1.1 先获取事件对象
      // 1.2 事件对象.stopPropagation()  注意是个方法 
      e.stopPropagation()
    }) 
  </script>
</body>

结论：事件对象中的 e.stopPropagation 方法，专门用来阻止事件冒泡（事件传播）

鼠标经过事件：

mouseover 和 mouseout 会有冒泡效果

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

1.4 事件委托

事件委托(EventDelegation)：是JavaScript中注册事件的常用技巧，也称为事件委派、事件代理

简单理解：原本需要注册在子元素的事件委托给父元素，让父元素担当事件监听的职务

为什么要用事件委托呢？

如果同时给多个元素注册事件，还需要利用循环多次注册事件
大量的事件监听是比较耗费性能的，如下代码所示

<script>
  // 假设页面中有 10000 个 button 元素
  const buttons = document.querySelectorAll('table button');

  for(let i = 0; i <= buttons.length; i++) {
    // 为 10000 个 button 元素添加了事件
    buttons.addEventListener('click', function () {
      // 省略具体执行逻辑...
    })
  }
</script>

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

优点：减少注册次数，可以提高程序性能
原理：事件委托其实是利用事件冒泡的特点
- 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

利用事件委托方式如何得到当前点击的元素呢？

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

<body>
  <ul>
    <li>第1个孩子</li>
    <li>第2个孩子</li>
    <li>第3个孩子</li>
    <li>第4个孩子</li>
    <li>第5个孩子</li>
  </ul>
  <script>
    // 需求： 点击每个小li都会有弹窗效果
    // 1. 获取父元素ul
    const ul = document.querySelector('ul')

    // 2. 给ul注册点击事件
    ul.addEventListener('click', function (e) {
      // alert('我会弹窗')
      // 3. 利用事件对象.target 得到目标元素
      // console.log(e.target)
      // e.target.style.color = 'pink'

      // 需求2：点击哪个小li，对应的li变色
      // console.dir(e.target.tagName) 可以得到目标元素的标签名
      if (e.target.tagName === 'LI') {
        e.target.style.color = 'pink'
      }
    })
  </script>

1.5 阻止默认行为

阻止元素发生默认的行为

例如：

当点击提交按钮时阻止对表单的提交
阻止链接的跳转等等

语法：

事件对象.preventDefault()

<body>
  <form action="">
    姓名: <input type="text" name="username">
    <button>提交</button>
  </form>
  <a href="http://www.baidu.com">点击跳转</a>
  <script>
    // 阻止默认行为
    const form = document.querySelector('form')
    const input = document.querySelector('[name=username]')
    form.addEventListener('submit', function (e) {
      // submit 是提交事件, 需要给表单注册
      // 如果input表单的值为空则不允许提交
      if (input.value === '') {
        // return 无法阻止提交事件
        e.preventDefault()  // 阻止提交事件
      }
    })

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

2、事件解绑（了解）

移除事件处理函数，也称为解绑事件

<body>
  <button class="l2">移除L2事件监听</button>
  <button class="l0">移除L0事件监听</button>
  <script>
    // 需求：按钮就点击一次，然后移除点击事件
    const l2 = document.querySelector('.l2')
    // 1. L2 事件移除 => 不能移除匿名函数
    function fn() {
      console.log('我执行了一次 ')
      l2.removeEventListener('click', fn)
    }
    // 事件中,具名函数不写小括号,因为需要执行事件的时候在调用
    l2.addEventListener('click', fn)

    // 2. L0 事件移除 
    const l0 = document.querySelector('.l0')
    l0.onclick = function () {
      console.log('我执行了一次 ')
      l0.onclick = null
    }
  </script>
</body>

3、其他事件

3.1 页面加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

为什么要学？

有些时候需要等页面资源全部处理完了做一些事情
老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到

事件名：load

监听页面所有资源加载完毕：

window.addEventListener('load', function() {
    // xxxxx
})

当初始的 HTML 文档被完全加载和解析完成之后就触发，而无需等待样式表、图像等完全加载

事件名：DOMContentLoaded

document.addEventListener('DOMContentLoaded', function() {
    // xxxxx
})

3.2 页面滚动事件

滚动条在滚动的时候持续触发的事件

为什么要学？

很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部

事件名：scroll

监听整个页面滚动：

window.addEventListener('scroll', function() {
    // xxxxx
})

scrollTop / scrollLeft, 被卷去的头部或者左侧，可以读取，也可以修改（赋值）

3.3 页面尺寸事件

会在窗口尺寸改变的时候触发事件：

window.addEventListener('resize', function() {
    // xxxxx
})

clientWidth和clientHeight，获取元素的可见部分宽高（不包含border，margin，滚动条等）

4、元素尺寸与位置

获取元素的自身宽高、包含元素自身设置的宽高、padding、border

在这里插入图片描述

<body>
  <div class="father">
    <div class="son"></div>
  </div>
  <script>
    // 需求: 要获取到 father的宽度和高度
    const father = document.querySelector('.father')
    // 1. offset系列获取宽高 => offsetWidth offsetHeight(包含padding和border)
    console.log(father.offsetWidth + '  offsetWidth')
    console.log(father.offsetHeight + '  offsetHeight')
    // 2. offset系列获取位置 => offsetLeft offsetTop
    //   如果父级有定位,则根据父级获取
    //   如果父级没定位,则根据浏览器获取
    console.log(father.offsetLeft + '  父级的offsetLeft')
    console.log(father.offsetTop + ' 父级的offsetTop')
    // 获取子元素的位置 => 跟父级有没有定位有关系
    const son = document.querySelector('.son')
    console.log(son.offsetLeft + '  子级的offsetLeft')
    console.log(son.offsetTop + '   子级的offsetTop')


    /*
      获取位置
      scrollLeft  和 scrollTop	  页面/元素被卷去的头部和左侧（滚动），可读写
      offsetLeft  和 offsetTop	  元素位置距离定位父级左上距离，只读

      获取大小
      clientWidth 和 clientHeight	元素大小，不包含border、margin等，只读
      offsetWidth 和 offsetHeight	元素大小，包含border、padding等，只读
    */
  </script>
</body>