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”。

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

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

相关内容

热门资讯

莫伤天下,是什么意思？ 莫伤天下,是什么意思？喜欢不喜欢不好界定，但是这个男人的情商不怎么样但是真的，女人说秋天的第一杯奶茶...
广告的好处与坏处 广告的好处与坏处急!!!!!!!!!!!马上要，短一点!现代广告的功能是多元化的，主要的功能有:信息...
映月读书 的典故? 映月读书 的典故?映月读书 【拼音】： yìng yuè dú shū【解释】： 利用月光来照明读书...
求分享《你和我的警察课堂》 求分享《你和我的警察课堂》《你和我的警察课堂》又奶又欲➕ 又甜又热血警校青春都超好磕简介：讲述了充满...
创新创业经费预算(创业启动资金... 启动资金用于支付场地(土地和建筑物)、办公家具和设备、机械、原材料和商品库存、营业执照和许可证、开业...
大学生创业数据分析,2020年... 本报讯(中国青年报、中国青年网见习记者金卓)为贯彻落实党中央、国务院“大众创业创新”战略规划，深入了...
2020创业项目小生意(201... 都说大城市竞争太大，生活成本很高。越来越多的人喜欢在小城市创业，因为他们喜欢那里的快速生活。在小城市...
讲述爱情故事的动画片，有什么 讲述爱情故事的动画片，有什么樱花庄的宠物女孩。四月是你的谎言，来自风平浪静的明天，未闻花名，我的青春...
创业规划步骤流程图(创业的流程... 想了很久，整理了很多资料，给那些有梦想，准备创业的年轻人一些想法。然后，因为我在杭州，所以所有的插画...
创业板指数基金哪个好(创业板e... 有读者关心，想投创业板指数基金。有什么可以推荐的？目前有29只公募基金以创业板相关指数作为投资标的。...