JavaScript Web APIs第三天笔记

在这里插入图片描述

Web APIs - 第3天

进一步学习 事件进阶，实现更多交互的网页特效，结合事件流的特征优化事件执行的效率

  • 掌握阻止事件冒泡的方法
  • 理解事件委托的实现原理

事件流

事件流是对事件执行过程的描述，了解事件的执行过程有助于加深对事件的理解，提升开发实践中对事件运用的灵活度。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如上图所示，任意事件被触发时总会经历两个阶段：【捕获阶段】和【冒泡阶段】。

简言之，捕获阶段是【从父到子】的传导过程，冒泡阶段是【从子向父】的传导过程。

捕获和冒泡

了解了什么是事件流之后，我们来看事件流是如何影响事件执行的：

<body><h3>事件流</h3><p>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。</p><div class="outer"><div class="inner"><div class="child"></div></div></div><script>// 获取嵌套的3个节点const outer = document.querySelector('.outer');const inner = document.querySelector('.inner');const child = document.querySelector('.child');// html 元素添加事件document.documentElement.addEventListener('click', function () {console.log('html...')})// body 元素添加事件document.body.addEventListener('click', function () {console.log('body...')})// 外层的盒子添加事件outer.addEventListener('click', function () {console.log('outer...')})// 中间的盒子添加事件outer.addEventListener('click', function () {console.log('inner...')})// 内层的盒子添加事件outer.addEventListener('click', function () {console.log('child...')})</script>
</body>

执行上述代码后发现，当单击事件触发时，其祖先元素的单击事件也【相继触发】，这是为什么呢？

结合事件流的特征，我们知道当某个元素的事件被触发时，事件总是会先经过其祖先才能到达当前元素，然后再由当前元素向祖先传递，事件在流动的过程中遇到相同的事件便会被触发。

再来关注一个细节就是事件相继触发的【执行顺序】，事件的执行顺序是可控制的，即可以在捕获阶段被执行，也可以在冒泡阶段被执行。

如果事件是在冒泡阶段执行的，我们称为冒泡模式，它会先执行子盒子事件再去执行父盒子事件，默认是冒泡模式。

如果事件是在捕获阶段执行的，我们称为捕获模式，它会先执行父盒子事件再去执行子盒子事件。

<body><h3>事件流</h3><p>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。</p><div class="outer"><div class="inner"></div></div><script>// 获取嵌套的3个节点const outer = document.querySelector('.outer')const inner = document.querySelector('.inner')// 外层的盒子outer.addEventListener('click', function () {console.log('outer...')}, true) // true 表示在捕获阶段执行事件// 中间的盒子outer.addEventListener('click', function () {console.log('inner...')}, true)</script>
</body>

结论：

  1. addEventListener 第3个参数决定了事件是在捕获阶段触发还是在冒泡阶段触发
  2. addEventListener 第3个参数为 true 表示捕获阶段触发，false 表示冒泡阶段触发，默认值为 false
  3. 事件流只会在父子元素具有相同事件类型时才会产生影响
  4. 绝大部分场景都采用默认的冒泡模式（其中一个原因是早期 IE 不支持捕获）

阻止冒泡

阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。

<body><h3>阻止冒泡</h3><p>阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。</p><div class="outer"><div class="inner"><div class="child"></div></div></div><script>// 获取嵌套的3个节点const outer = document.querySelector('.outer')const inner = document.querySelector('.inner')const child = document.querySelector('.child')// 外层的盒子outer.addEventListener('click', function () {console.log('outer...')})// 中间的盒子inner.addEventListener('click', function (ev) {console.log('inner...')// 阻止事件冒泡ev.stopPropagation()})// 内层的盒子child.addEventListener('click', function (ev) {console.log('child...')// 借助事件对象，阻止事件向上冒泡ev.stopPropagation()})</script>
</body>

结论：事件对象中的 ev.stopPropagation 方法，专门用来阻止事件冒泡。

鼠标经过事件：

mouseover 和 mouseout 会有冒泡效果

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

事件委托

事件委托是利用事件流的特征解决一些现实开发需求的知识技巧，主要的作用是提升程序效率。

大量的事件监听是比较耗费性能的，如下代码所示

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

利用事件流的特征，可以对上述的代码进行优化，事件的的冒泡模式总是会将事件流向其父元素的，如果父元素监听了相同的事件类型，那么父元素的事件就会被触发并执行，正是利用这一特征对上述代码进行优化，如下代码所示：

<script>// 假设页面中有 10000 个 button 元素let buttons = document.querySelectorAll('table button');// 假设上述的 10000 个 buttom 元素共同的祖先元素是 tablelet parents = document.querySelector('table');parents.addEventListener('click', function () {console.log('点击任意子元素都会触发事件...');})
</script>

我们的最终目的是保证只有点击 button 子元素才去执行事件的回调函数，如何判断用户点击是哪一个子元素呢？

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

事件对象中的属性 target 或 srcElement属性表示真正触发事件的元素，它是一个元素类型的节点。

<script>// 假设页面中有 10000 个 button 元素const buttons = document.querySelectorAll('table button')// 假设上述的 10000 个 buttom 元素共同的祖先元素是 tableconst parents = document.querySelector('table')parents.addEventListener('click', function (ev) {// console.log(ev.target);// 只有 button 元素才会真正去执行逻辑if(ev.target.tagName === 'BUTTON') {// 执行的逻辑}})
</script>

优化过的代码只对祖先元素添加事件监听，相比对 10000 个元素添加事件监听执行效率要高许多！！！

其他事件

页面加载事件

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

有些时候需要等页面资源全部处理完了做一些事情

事件名：load

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

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

元素滚动事件

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

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

页面尺寸事件

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

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

元素尺寸与位置

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

offsetWidth和offsetHeight

获取出来的是数值,方便计算

注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0

寸事件

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

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

元素尺寸与位置

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

offsetWidth和offsetHeight

获取出来的是数值,方便计算

注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/146000.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C 语言关键字_at_的使用

C 语言关键字_at_的使用

查看一些老旧代码的时候看到有这么一段。 这个函数是轮询执行的&#xff0c;但是sourceinsight却没有找到vs_ucLedSegDutyRam的定义&#xff0c;全局搜索才找得到&#xff0c;结果发现原来它的定义很奇特。 里面用了_at_这个东西 _at_是让定义的vs_ucLedSegDutyRam首地址定义在…
阅读更多...
【AI视野·今日NLP 自然语言处理论文速览 第四十期】Mon, 25 Sep 2023

【AI视野·今日NLP 自然语言处理论文速览 第四十期】Mon, 25 Sep 2023

AI视野今日CS.NLP 自然语言处理论文速览 Mon, 25 Sep 2023 Totally 46 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers ReConcile: Round-Table Conference Improves Reasoning via Consensus among Diverse LLMs Authors Justin C…
阅读更多...
机器学习之SGD, Batch, and Mini Batch的简单介绍

机器学习之SGD, Batch, and Mini Batch的简单介绍

文章目录 总述SGD(Stochastic Gradient Descent)(随机梯度下降&#xff09;Batch &#xff08;批量&#xff09;mini Batch (迷你批量&#xff09; 总述 SGD, Batch, and Mini Batch是可用于神经网络的监督学习计算权重更新的方案&#xff0c;即∆wij。 SGD(Stochastic Gradi…
阅读更多...
竞赛 基于设深度学习的人脸性别年龄识别系统

竞赛 基于设深度学习的人脸性别年龄识别系统

文章目录 0 前言1 课题描述2 实现效果3 算法实现原理3.1 数据集3.2 深度学习识别算法3.3 特征提取主干网络3.4 总体实现流程 4 具体实现4.1 预训练数据格式4.2 部分实现代码 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习机器视觉的…
阅读更多...
市场调研的步骤与技巧：助你了解市场需求

市场调研的步骤与技巧：助你了解市场需求

在当今快速发展的市场中&#xff0c;进行有效的市场研究对于了解消费者的行为、偏好和趋势至关重要。适当的市场研究可以帮助公司获得对目标受众的有价值的见解&#xff0c;创造更好的产品和服务&#xff0c;并提高客户满意度。今天&#xff0c;小编和大家一起讨论一下怎么做市…
阅读更多...
[Linux] 6.VMware虚拟机网络配置

[Linux] 6.VMware虚拟机网络配置

在VMware虚拟机下可以在虚拟网络编辑器看到三种模式 一、Bridged&#xff08;桥接模式&#xff09; 桥接模式就是将主机网卡与虚拟机虚拟的网卡利用虚拟网桥进行通信。 真机、虚拟机都有自己的ip地址&#xff0c;能互相通讯&#xff0c;而且能上网。 功能齐全&#xff0c;但…
阅读更多...
Arduino ESP32/ESP8266 +ST7735 1.8“tft中秋小时钟

Arduino ESP32/ESP8266 +ST7735 1.8“tft中秋小时钟

Arduino ESP32 ST7735 1.8"tft中秋小时钟 &#x1f33c;原作者B站视频&#xff1a; ESP32中秋小时钟&#xff0c;表盘自动切换&#xff0c;代码开源&#xff0c;原图可下载&#xff08;案例应用&#xff09; &#x1f39e;tft ST7735 128160 1.8" 显示效果:(由于原作…
阅读更多...
MD5 绕过第二式：数组绕过

MD5 绕过第二式：数组绕过

文章目录 参考环境推荐阅读强类型比较运算符雾来哈希碰撞目标 王小云院士与白宫密码王小云院士两度破译白宫密码白宫密码亮剑十年磨一剑 雾散曲径通幽WarningPHP 中的数组与 md5()尝试绕过PHP8 下的致命错误 参考 项目描述搜索引擎Bing、GoogleAI 大模型文心一言、通义千问、讯…
阅读更多...
JavaScript中如何确定this的值？如何指定this的值？

JavaScript中如何确定this的值？如何指定this的值？

&#x1f380;JavaScript中的this 在绝大多数情况下&#xff0c;函数的调用方法决定了this的值&#xff08;运行时绑定&#xff09;。this不能在执行期间被赋值&#xff0c;并且在每次函数呗调用时this的值也可能会不同。 &#x1f37f;如何确定this的值&#xff1a; 在非严格…
阅读更多...
【React】React组件生命周期以及触发顺序（部分与vue做比较）

【React】React组件生命周期以及触发顺序（部分与vue做比较）

最近在学习React&#xff0c;发现其中的生命周期跟Vue有一些共同点&#xff0c;但也有比较明显的区别&#xff0c;并且执行顺序也值得讨论一下&#xff0c;于是总结了一些资料在这里&#xff0c;作为学习记录。 v17.0.1后生命周期图片 初始化阶段 由ReactDOM.render()触发 —…
阅读更多...
【Axure】元件库和母版、常见的原型规范、静态原型页面制作

【Axure】元件库和母版、常见的原型规范、静态原型页面制作

添加现有元件库 点击元件库——载入 当然也可以创建元件库&#xff0c;自己画自己保存 建立京东秒杀母版 静态原型页面的制作 框架 选择以iphone8的界面大小为例&#xff0c;顶部状态栏高度为20 左侧类似于标尺&#xff0c;因为图标、文字离最左侧的间距是不一样的 信…
阅读更多...
Nat. Commun. | 大规模高分辨单光子成像

Nat. Commun. | 大规模高分辨单光子成像

本文由论文作者团队（课题组）投稿 单光子雪崩二极管（Single Photon Avalanche Diode，简称SPAD）阵列因其极佳的单光子灵敏度而受到广泛关注，已广泛应用于量子通信与计算、荧光寿命成像、时间飞行成像等各个领域。与同样具有较高灵敏度的EMCCD和sCMOS相比，SPAD阵列能够在极…
阅读更多...
车载ADB环境搭建

车载ADB环境搭建

ADB是什么 ADB&#xff0c;即 Android Debug Bridge 是一种允许模拟器或已连接的 Android 设备进行通信的命令行工具&#xff0c;它可为各种设备操作提供便利&#xff0c;如安装和调试应用&#xff0c;并提供对 Unix shell&#xff08;可用来在模拟器或连接的设备上运行各种命…
阅读更多...
SimpleCG动画示例--汉诺塔动画演示

SimpleCG动画示例--汉诺塔动画演示

前言 SimpleCG的使用方法在前面已经介绍了许多&#xff0c;有兴趣的同学如果有去动手&#xff0c;制作一些简单动画应该没多大问题的。所以这次我们来演示一下简单动画。我们刚学习C语言的递归函数时&#xff0c;有一个经典例子相信很多同学都写过&#xff0c;那就是汉诺塔。那…
阅读更多...
【C++】多线程的学习笔记——白话文版（bushi

【C++】多线程的学习笔记——白话文版（bushi

目录 为什么要使用多线程 例子 代码 结果 首先要先学的库——thread库 thread的简介 thread的具体使用方法 基本变量的定义 注意&#xff08;小重点&#xff09; join函数的解读&#xff08;重点&#xff09; detach函数的解读 注意 关于vector和thread是联合使用 …
阅读更多...
【DLoopDetector（C++）】DBow2词袋模型loop close学习

【DLoopDetector（C++）】DBow2词袋模型loop close学习

0.前言 最近读了两篇论文&#xff0c;论文作者开源了一种基于词袋模型DBoW2库的DLoopDetector算法&#xff0c;自己运行demo测试一下 对应论文介绍&#xff1a;Bags of Binary Words for Fast Place Recognition in Image Sequences 开源项目Github地址&#xff1a;https://gi…
阅读更多...
P1541 [NOIP2010 提高组] 乌龟棋（4维背包问题）

P1541 [NOIP2010 提高组] 乌龟棋（4维背包问题）

[NOIP2010 提高组] 乌龟棋 题目背景 小明过生日的时候&#xff0c;爸爸送给他一副乌龟棋当作礼物。 题目描述 乌龟棋的棋盘是一行 N N N 个格子&#xff0c;每个格子上一个分数&#xff08;非负整数&#xff09;。棋盘第 1 1 1 格是唯一的起点&#xff0c;第 N N N 格是…
阅读更多...
C++代码示例：排列数简单生成工具

C++代码示例：排列数简单生成工具

文章目录 前言代码仓库内容代码&#xff08;有详细注释&#xff09;编译和运行命令结果总结参考资料作者的话 前言 C代码示例&#xff1a;排列数简单生成工具。 代码仓库 yezhening/Programming-examples: 编程实例 (github.com)Programming-examples: 编程实例 (gitee.com) …
阅读更多...
GEO生信数据挖掘（四）数据清洗（离群值处理、低表达基因、归一化、log2处理）

GEO生信数据挖掘（四）数据清洗（离群值处理、低表达基因、归一化、log2处理）

检索到目标数据集后&#xff0c;开始数据挖掘&#xff0c;本文以阿尔兹海默症数据集GSE1297为例 目录 离群值处理 删除 低表达基因 函数归一化&#xff0c;矫正差异 数据标准化—log2处理 完整代码 上节围绕着探针ID和基因名称做了一些清洗工作&#xff0c;还做了重复值检查…
阅读更多...
牛客网_HJ2_计算某字符出现次数

牛客网_HJ2_计算某字符出现次数

HJ2_计算某字符出现次数 原题思路代码运行截图收获 原题 HJ2_计算某字符出现次数 思路 把输入的字符串和字符都变成大写或小写&#xff0c;然后逐一计数 代码 #include <cctype> #include <iostream> #include <string> #include <algorithm> usi…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023