JavaScript学习文档（9）：事件流、事件委托、其他事件、元素尺寸与位置

于 2024-08-28 22:26:19 发布
阅读量1k 收藏 15
点赞数 19
文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58433849/article/details/141650063
版权

目录

一、事件流

1、事件流的两个阶段

2、事件捕获

3、事件冒泡

4、阻止冒泡

5、解绑事件

（1）解绑事件

（2）鼠标经过事件区别

二、事件委托

1、优点

2、原理

3、实现

4、tab栏切换案例改造

三、其他事件

1、页面加载事件

2、元素滚动事件

（1）页面滚动事件-获取位置

（2）页面滚动事件-滚动到指定的坐标

3、页面尺寸事件

四、元素尺寸与位置

1、使用场景：

2、元素尺寸于位置

3、仿京东固定导航栏

总结：

一、事件流

1、事件流的两个阶段

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

  • 说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
  • 简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父
  • 实际工作都是使用事件冒泡为主

2、事件捕获

  • 事件捕获的概念

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

  • 语法
DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获)
  • 说明：
  •  addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用） 
  • 若传入false代表冒泡阶段触发，默认就是false
  • 若是用 L0 事件监听，则只有冒泡阶段，没有捕获

3、事件冒泡

  • 事件冒泡的概念

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

  • 简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
  • 事件冒泡是默认存在的
  • L2事件监听第三个参数是 false，或者默认都是冒泡

4、阻止冒泡

  • 问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
  • 需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡
  • 前提：阻止事件冒泡需要拿到事件对象
  • 语法：
事件对象.stopPropagation()

示例代码如下：

  <style>
    .father {
      width: 500px;
      height: 500px;
      background-color: pink;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <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('我是爷爷')
    })
    fa.addEventListener('click', function () {
      alert('我是爸爸')
    })
    son.addEventListener('click', function (e) {
      alert('我是儿子')
      // 阻止流动传播  事件对象.stopPropagation()
      e.stopPropagation()
    })
  </script>
  • 我们某些情况下需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转
  • 语法
e.preventDefault()

示例代码如下：

  <form action="http://www.itcast.cn">
    <input type="submit" value="免费注册">
  </form>
  <a href="http://www.baidu.com">百度一下</a>
  <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>

5、解绑事件

（1）解绑事件

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

addEventListener方式，必须使用：

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

注意：匿名函数无法被解绑

示例代码如下：

  <button>点击</button>
  <script>
    const btn = document.querySelector('button')
    // btn.onclick = function () {
    //   alert('点击了')
    //   // L0 事件移除解绑
    //   btn.onclick = null
    // }
    function fn() {
      alert('点击了')
    }
    btn.addEventListener('click', fn)
    // L2 事件移除解绑
    btn.removeEventListener('click', fn)
  </script>
（2）鼠标经过事件区别
  • 鼠标经过事件：
  •  mouseover 和 mouseout 会有冒泡效果
  •  mouseenter 和 mouseleave 没有冒泡效果 （推荐）

示例代码如下：

CSS样式代码：

    .dad {
      width: 400px;
      height: 400px;
      background-color: pink;
    }

    .baby {
      width: 200px;
      height: 200px;
      background-color: purple;
    }

JavaScript代码：

  <div class="dad">
    <div class="baby"></div>
  </div>
  <script>
    const dad = document.querySelector('.dad')
    const baby = document.querySelector('.baby')
    dad.addEventListener('mouseenter', function () {
      console.log('鼠标经过')
    })
    dad.addEventListener('mouseleave', function () {
      console.log('鼠标离开')
    })
  </script>

二、事件委托

1、优点

减少注册次数，可以提高程序性能

2、原理

事件委托其实是利用事件冒泡的特点。

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

3、实现

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

示例代码如下：

 <ul>
    <li>第1个孩子</li>
    <li>第2个孩子</li>
    <li>第3个孩子</li>
    <li>第4个孩子</li>
    <li>第5个孩子</li>
    <p>我不需要变色</p>
  </ul>
  <script>
    // 点击每个小li 当前li 文字变为红色
    // 按照事件委托的方式  委托给父级，事件写到父级身上
    // 1. 获得父元素
    const ul = document.querySelector('ul')
    ul.addEventListener('click', function (e) {
      // alert(11)
      // this.style.color = 'red'
      // console.dir(e.target) // 就是我们点击的那个对象
      // e.target.style.color = 'red'
      // 我的需求，我们只要点击li才会有效果
      if (e.target.tagName === 'LI') {
        e.target.style.color = 'red'
      }
    })
  </script>

4、tab栏切换案例改造

需求：优化程序，将tab切换案例改为事件委托写法

思路：

①：给a的父级 注册点击事件，采取事件委托方式

②： 如果点击的是A , 则进行排他思想，删除添加类

③： 注意判断的方式 利用 e.target.tagName

④： 因为没有索引号了，所以这里我们可以自定义属性，给5个链接添加序号

⑤： 下面大盒子获取索引号的方式 e.target.dataset.id 号， 然后进行排他思想

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>tab栏切换</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .tab {
      width: 590px;
      height: 340px;
      margin: 20px;
      border: 1px solid #e4e4e4;
    }

    .tab-nav {
      width: 100%;
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
    }

    .tab-nav h3 {
      font-size: 24px;
      font-weight: normal;
      margin-left: 20px;
    }

    .tab-nav ul {
      list-style: none;
      display: flex;
      justify-content: flex-end;
    }

    .tab-nav ul li {
      margin: 0 20px;
      font-size: 14px;
    }

    .tab-nav ul li a {
      text-decoration: none;
      border-bottom: 2px solid transparent;
      color: #333;
    }

    .tab-nav ul li a.active {
      border-color: #e1251b;
      color: #e1251b;
    }

    .tab-content {
      padding: 0 16px;
    }

    .tab-content .item {
      display: none;
    }

    .tab-content .item.active {
      display: block;
    }
  </style>
</head>

<body>
  <div class="tab">
    <div class="tab-nav">
      <h3>每日特价</h3>
      <ul>
        <li><a class="active" href="javascript:;" data-id="0">精选</a></li>
        <li><a href="javascript:;" data-id="1">美食</a></li>
        <li><a href="javascript:;" data-id="2">百货</a></li>
        <li><a href="javascript:;" data-id="3">个护</a></li>
        <li><a href="javascript:;" data-id="4">预告</a></li>
      </ul>
    </div>
    <div class="tab-content">
      <div class="item active"><img src="./images/tab00.png" alt="" /></div>
      <div class="item"><img src="./images/tab01.png" alt="" /></div>
      <div class="item"><img src="./images/tab02.png" alt="" /></div>
      <div class="item"><img src="./images/tab03.png" alt="" /></div>
      <div class="item"><img src="./images/tab04.png" alt="" /></div>
    </div>
  </div>
  <script>
    // 采取事件委托的形式 tab栏切换
    // 1. 获取 ul 父元素 因为 ul只有一个
    const ul = document.querySelector('.tab-nav ul')
    // 获取 5个 item 
    const items = document.querySelectorAll('.tab-content .item')
    // 2. 添加事件
    ul.addEventListener('click', function (e) {
      // console.log(e.target)  // e.target是我们点击的对象
      // 我们只有点击了 a 才会 进行 添加类和删除类操作 
      // console.log(e.target.tagName)  // e.target.tagName 点击那个对象的 标签名
      if (e.target.tagName === 'A') {
        // console.log('我选的是a')
        // 排他思想 ，先移除原来的active  
        document.querySelector('.tab-nav .active').classList.remove('active')
        //当前元素添加 active  是 e.target
        // this 指向ul 不能用this 
        e.target.classList.add('active')

        // 下面大盒子模块
        // console.log(e.target.dataset.id)
        const i = +e.target.dataset.id
        // 排他思想 ，先移除原来的active 
        document.querySelector('.tab-content .active').classList.remove('active')
        // 对应的大盒子 添加 active 
        // document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
        items[i].classList.add('active')
      }
    })
  </script>
</body>

</html>

三、其他事件

1、页面加载事件

  • 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
  • 事件名：load
  • 监听页面所有资源加载完毕：给 window 添加 load 事件
  • 注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
  • 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完 全加载
  • 事件名：DOMContentLoaded
  • 监听页面DOM加载完毕：给 document 添加 DOMContentLoaded 事
  • 示例代码如下：
<script>
    // 等待页面所有资源加载完毕，就回去执行回调函数
    // window.addEventListener('load', function () {
    //   const btn = document.querySelector('button')
    //   btn.addEventListener('click', function () {
    //     alert(11)
    //   })
    // })

    // img.addEventListener('load', function () {
    //   // 等待图片加载完毕，再去执行里面的代码
    // })

    document.addEventListener('DOMContentLoaded', function () {
      const btn = document.querySelector('button')
      btn.addEventListener('click', function () {
        alert(11)
      })
    })
  </script>
</head>

<body>
  <button>点击</button>
</body>

2、元素滚动事件

  • 滚动条在滚动的时候持续触发的事件
  • 很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
  • 事件名：scroll
  • 监听整个页面滚动：给 window 或 document 添加 scroll事件
  • 监听某个元素的内部滚动直接给某个元素加即可
（1）页面滚动事件-获取位置
  • scrollLeft和scrollTop （属性）：
  • 获取被卷去的大小
  •  获取元素内容往左、往上滚出去看不到的距离
  • 这两个值是可读写的
  • 尽量在scroll事件里面获取被卷去的距离
  • 开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

注意事项：document.documentElement HTML 文档返回对象为HTML元素

示例代码如下：

  <script>
    const div = document.querySelector('div')
    // 页面滚动事件
    window.addEventListener('scroll', function () {
      // console.log('我滚了')
      // 我想知道页面到底滚动了多少像素， 被卷去了多少  scrollTop
      // 获取html元素写法  
      // document.documentElement  
      // console.log(document.documentElement.scrollTop)
      const n = document.documentElement.scrollTop
      if (n >= 100) {
        div.style.display = 'block'
      } else {
        div.style.display = 'none'
      }
    })
    // const div = document.querySelector('div')
    // div.addEventListener('scroll', function () {
    //   // console.log(111)
    //   // scrollTop 被卷去的头部
    //   console.log(div.scrollTop)
    // })
  </script>
  <style>
    body {
      height: 3000px;
    }
  </style>
</head>
<body>
  <script>
    document.documentElement.scrollTop = 800
    window.addEventListener('scroll', function () {
      // 必须写到里面
      const n = document.documentElement.scrollTop
      // 得到是什么数据   数字型 不带单位
      // console.log(n)
    })
  </script>
</body>
（2）页面滚动事件-滚动到指定的坐标
  • scrollTo() 方法可把内容滚动到指定的坐标
  • 语法： 元素.scrollTo(x, y)
  • 例如：

//让页面滚动到y轴1000像素的位置

window.scrollTo(0,1000)

3、页面尺寸事件

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

resize：

  • 检测屏幕宽度：
  • 获取宽高：
  • 获取元素的可见部分宽高（不包含边框，margin，滚动条等）
  • clientWidth和clientHeight

示例代码如下：

  <style>
    div {
      display: inline-block;
      /* width: 200px; */
      height: 200px;
      background-color: pink;
      padding: 10px;
      border: 20px solid red;
    }
  </style>
</head>

<body>
  <div>123123123123123123123123123123123123123</div>
  <script>
    const div = document.querySelector('div')
    console.log(div.clientWidth)
    // resize 浏览器窗口大小发生变化的时候触发的事件
    window.addEventListener('resize', function () {
      console.log(1)
    })
  </script>
</body>

四、元素尺寸与位置

1、使用场景：

简单说，就是通过js的方式，得到元素在页面中的位置

2、元素尺寸于位置

  • 获取宽高：
  • 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
  •  offsetWidth和offsetHeight  
  • 获取出来的是数值,方便计算
  •  注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
  • 获取位置：获取元素距离自己定位父级元素的左、上距离
  •  offsetLeft和offsetTop 注意是只读属性
  • 获取位置：
  • offsetLeft和offsetTop 注意是只读属性
  • 获取元素距离自己定位父级元素的左、上距离
  • . element.getBoundingClientRect()
  • 方法返回元素的大小及其相对于视口的位置

3、仿京东固定导航栏

需求：当页面滚动到秒杀模块，导航栏自动滑入，否则滑出 分析：

①：用到页面滚动事件

②：检测页面滚动大于等于 秒杀模块的位置 则滑入，否则滑出

③：主要移动的是秒杀模块的顶部位置

示例代码如下：

    <div class="header">我是顶部导航栏</div>
    <div class="content">
        <div class="sk">秒杀模块</div>
    </div>
    <div class="backtop">
        <img src="./images/close2.png" alt="">
        <a href="javascript:;"></a>
    </div>
    <script>
        const sk = document.querySelector('.sk')
        const header = document.querySelector('.header')
        // 1. 页面滚动事件
        window.addEventListener('scroll', function () {
            // 当页面滚动到 秒杀模块的时候，就改变 头部的 top值
            // 页面被卷去的头部 >=  秒杀模块的位置 offsetTop
            const n = document.documentElement.scrollTop
            // if (n >= sk.offsetTop) {
            //     header.style.top = 0
            // } else {
            //     header.style.top = '-80px'
            // }
            header.style.top = n >= sk.offsetTop ? 0 : '-80px'
        })
    </script>

总结：

码农_小文
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值