Web APIs三、DOM事件进阶
创始人
2024-06-03 03:22:39
0次

零、文章目录

文章地址

  • 个人博客-CSDN地址：https://blog.csdn.net/liyou123456789
  • 个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn

代码仓库地址

  • Gitee：https://gitee.com/bluecusliyou/TechLearn
  • Github：https://github.com/bluecusliyou/TechLearn

Web APIs三、DOM事件进阶

1、事件流

（1）事件流和两个阶段说明

  • 事件流指的是事件完整执行过程中的流动路径
  • 假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
  • 简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父
  • 实际工作都是使用事件冒泡为主

image-20230308131525002

（2）事件捕获

  • **事件捕获概念：**从DOM的根元素开始去执行对应的事件 (从外到里)

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

  • 语法：DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

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

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

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

（3）事件冒泡

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

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

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

案例如下：


事件流

（4）阻止冒泡、默认行为

  • **问题：**因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
  • **需求：**若想把事件就限制在当前元素内，就需要阻止事件冒泡
  • **前提：**阻止事件冒泡需要拿到事件对象
  • 事件对象.stopPropagation()：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
  • e.preventDefault()：我们某些情况下需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转

阻止冒泡：


阻止冒泡

阻止默认行为：


阻止默认行为

百度一下

（5）解绑事件

  • on事件方式：直接使用null覆盖就可以实现事件的解绑
  • addEventListener方式：必须使用removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])。
  • 注意：匿名函数无法被解绑

案例如下：


事件解绑

（6）其他说明

  • 鼠标经过事件的区别

    • mouseover 和 mouseout 会有冒泡效果
    • mouseenter 和 mouseleave 没有冒泡效果 (推荐)

  • 两种注册事件的区别

    • 传统on注册（L0）

      • 同一个对象，后面注册的事件会覆盖前面注册(同一个事件)

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

      • 都是冒泡阶段执行的

    • 事件监听注册（L2）

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

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

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

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

      • 匿名函数无法被解绑

案例如下：


mouseover和mouseenter的区别

2、事件委托

  • 事件委托：利用事件流的特征解决一些开发需求的知识技巧
  • 优点：减少注册次数，可以提高程序性能
  • 原理：事件委托其实是利用事件冒泡的特点，只给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
  • 实现：事件对象.target. tagName 可以获得真正触发事件的元素

案例如下：


事件委托

  • 第1个孩子
  • 第2个孩子
  • 第3个孩子
  • 第4个孩子
  • 第5个孩子
    • 我不需要变色

tab栏切换改造：

image-20230308172506799


tab栏切换改造

3、其他事件

（1）页面加载事件

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

  • 使用场景：

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

  • load事件：监听页面所有资源加载完毕，可以给 window 添加 load 事件，不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

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

案例如下：


页面加载事件

（2）元素滚动事件

  • scroll事件：监听某个元素滚动时触发，直接给某个元素加即可。
    • 使用场景：很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部

image-20230308152108248

  • scrollLeft和scrollTop （属性）
    • 获取元素内容往左、往上滚出去看不到的距离，返回的是数值，没有单位，这两个值是可读写的
    • document.documentElement.scrollTop：开发中，我们经常检测页面滚动的距离

image-20230308152512694

image-20230308152537977

image-20230308153010804

  • scrollTo() ：可把内容滚动到指定的坐标

image-20230308153038967

案例如下：


页面滚动事件

我里面有很多很多的文字 我里面有很多很多的文字 我里面有很多很多的文字 我里面有很多很多的文字 我里面有很多很多的文字 我里面有很多很多的文字 我里面有很多很多的文字 我里面有很多很多的文字 我里面有很多很多的文字 我里面有很多很多的文字 我里面有很多很多的文字 我里面有很多很多的文字 我里面有很多很多的文字 我里面有很多很多的文字

（3）页面尺寸事件

  • resize事件：会在窗口尺寸改变的时候触发事件，例如检测屏幕宽度

image-20230308154238684

image-20230308154308941

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

image-20230308154427859

image-20230309112638522

案例如下：


页面尺寸事件

123123123123123123123123123123123123123

4、元素尺寸与位置

（1）使用场景

  • 前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。
  • 简单说，就是通过js的方式，得到元素在页面中的位置
  • 这样我们可以做，页面滚动到这个位置，就可以做某些操作，省去计算了

（2）获取宽高

  • offsetWidth和offsetHeight：
    • 获取元素的自身宽高、包含元素自身设置的宽高、padding、border。
    • 获取出来的是数值，方便计算
    • 注意: 获取的是可视宽高, 如果盒子是隐藏的，获取的结果是0

（3）获取位置

  • offsetLeft和offsetTop ：获取元素距离自己定位父级元素的左、上距离，注意是只读属性

image-20230308160201350

案例如下：


offsetLeft
  • element.getBoundingClientRect()：方法返回元素的大小及其相对于视口的位置

案例如下：


获取元素大小

image-20230309131619474

（4）总结

image-20230308160712129

（5）仿京东固定头部案例

image-20230309113016513


仿京东固定头部

我是顶部导航栏
秒杀模块

（6）点击小滑块移动效果案例

image-20230309132122056


bilibili-干杯~~~

播放量评论数
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
播放量评论数
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
播放量评论数
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
播放量评论数
315晚会能不能曝光下电视？
播放量评论数
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
播放量评论数
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
播放量评论数
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
播放量评论数
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
播放量评论数
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
播放量评论数
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
播放量评论数
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
 打开App，看你感兴趣的视频

5、电梯导航案例

image-20230309133220087

image-20230308162044175


小兔鲜儿 - 新鲜 惠民 快捷!

热门品牌国际经典 品质保证
客户服务
在线客服
问题反馈
关注我们
公众号
微博
下载APP
扫描二维码立马下载APP下载页面
服务热线
400-0000-000周一至周日 8:00-18:00
词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：年轻人最适合小本项目 年轻人小本创业项目前十名 适合年轻人的小本创业项目哪里有

下一篇：小本创业项目(五个不起眼的小生意，适合白手起家小本创业项目，着实不容忽略) 十种小本创业好项目大全 适合白手起家的小本创业

相关内容

热门资讯

杨字的含义 杨字的含义 扬：张扬，自得的意思【解释】：趾高：走路时脚抬得很高；气扬：意气扬扬。走路时脚抬得很...
有梦子的四字成语？ 有梦子的四字成语？白日做梦、魂牵梦萦、如梦初醒、梦寐以求、酣然入梦、半梦半醒、重温旧梦、夜长梦多、同...
恶人自有恶人磨 恶人自有恶人磨恶人自有恶人磨 (è rén zì yǒu è rén mó)解释：凶恶成性的人自然...
相对论中，火车断桥问题的答案是... 相对论中，火车断桥问题的答案是什么？这个假设唯一只有一个问题。败伏什么叫做“同时”？“只有两个发射器...
虎什么熊的成语 虎什么熊的成语这不是闹经急转弯虎背熊腰hǔ bèi xióng yāo成语解释如虎般宽厚的背；似熊样...
《亡念之扎姆德》男主角最后跟谁... 《亡念之扎姆德》男主角最后跟谁在一起？男主石化了九年，女主每天都来和他说话，然后九年后的第二天男主解...
火影忍者动画和漫画貌似不一样，... 火影忍者动画和漫画貌似不一样，海贼王动画和漫画一样吗？总是有些偏差的吧。。个人比较忠实原作。海贼王没...
让人非我弱，得志莫离群 让人非我弱，得志莫离群像投鼠忌器一样的意思吧,我躲,不是我怕你,而是我心有顾忌.不是因为势力差距而起...
《北宋小厨师》这本书更到现在男... 《北宋小厨师》这本书更到现在男猪脚泡到李师师和李清照了吗没有0.0....还没有啊因为还没结局
路边油炸的小摊上的酱是怎么做的... 路边油炸的小摊上的酱是怎么做的！要是家用,那可以选择用芝麻浆来做主配料.芝麻浆和水要1:1(水最好是...
《超禁忌游戏-五十分之一》应该... 《超禁忌游戏-五十分之一》应该完结了吧你要的是完整版的，但负责任地告诉你，现在不可能有，有也是骗你的...
公共经济学 答案 公共经济学 答案这个真不知道～！～谢谢～！～1.D2.D3.C4.B5.C6.D7.C8.B9.B1...
证券投资学 跟投资学有什么区别 证券投资学 跟投资学有什么区别投资学包括证券投资学。投资学包括各方面的投资学，比如黄金投资，期货投资...
忘记名字了，就是男主得到系统打... 忘记名字了，就是男主得到系统打英雄联盟，在联盟里边开挂可以变身眼可以变成野怪可以身穿求这部小说名字你...
个性签名为了你我愿意变成魔于全... 个性签名为了你我愿意变成魔于全世界为敌不爱那么多，只爱一点点，别人眉来又眼去，我只偷看你一眼。不要走...
野钓实用技巧 黑坑钓鱼技巧？ 野钓实用技巧 黑坑钓鱼技巧？钓什么鱼要了解鱼的习性，了解对象鱼生活在哪个水层，喜欢吃什么食物，然后根...
江哲是那本书的？ 江哲是那本书的？字随云的是《随波逐流之一代军师》字守义的是《三国之宅行天下》呵呵……这两本小说的江哲...
满满的生活经历是啥意思？ 满满的生活经历是啥意思？满满的生活经历，说明的是这个人的生活阅历很深。
哪部国产青春剧比较贴近现实？ 哪部国产青春剧比较贴近现实？《最好的我们》比较贴近现实，讲述的就是校园爱情故事，说的就是真实的高中生...
天涯海角与君共度 出自哪首歌呢... 天涯海角与君共度 出自哪首歌呢。云中歌主题曲丝罗李宇春的丝罗你好。楼主。李宇春《丝罗》伊本丝萝愿托乔...