[webgis 0基础到找工作]------JavaScript--DOM事件进阶 day10

1.事件流

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

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

1.1捕获和冒泡

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

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

<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 不支持捕获）

1.2阻止冒泡

<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 没有冒泡效果 (推荐)

2.事件委托

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

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

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

事件对象中的属性 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>

例

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

3.其他事件

3.1页面加载事件

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

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

事件名：load

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

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

3.2元素滚动事件

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

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

3.3页面尺寸事件

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

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

4.元素尺寸与位置

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

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

例

const entry = document.querySelector('.xtx_entry')const elevator = document.querySelector('.xtx-elevator')window.addEventListener('scroll', function () {const n = document.documentElement.scrollTopelevator.style.opacity = n > entry.scrollTop ? 1 : 0})

5.属性选择器

CSS 属性选择器用于根据元素的属性或属性值来选择 HTML 元素。

属性选择器可以帮助你在不需要为元素添加类或 ID 的情况下对其进行样式化。

1、[attribute]

选择带有指定属性的所有元素（无论属性值是什么）。

/* 选择所有具有 `type` 属性的元素 */
[type] {border: 1px solid red;
}

2、[attribute="value"]

选择具有指定属性和值完全匹配的元素。

/* 选择所有 `type` 属性等于 `text` 的元素 */
[type="text"] {background-color: yellow;
}

3、[attribute~="value"]

选择属性值中包含指定词（用空格分隔的词列表之一）的元素。

/* 选择属性值中包含 `button` 的元素 */
[class~="button"] {font-weight: bold;
}

4、[attribute|="value"]

选择具有指定值或者以指定值开头并紧跟着连字符 - 的属性值的元素，常用于语言代码。

/* 选择所有 `lang` 属性是 `en` 或者以 `en-` 开头的元素 */
[lang|="en"] {color: green;
}

5、[attribute^="value"]

选择属性值以指定值开头的元素。

/* 选择所有 `href` 属性以 `https` 开头的链接 */
[href^="https"] {text-decoration: none;
}

6、[attribute$="value"]

选择属性值以指定值结尾的元素。

/* 选择所有 src 属性以 .jpg 结尾的图片 */
[src$=".jpg"] {border: 2px solid blue;
}

7、[attribute*="value"]

选择属性值中包含指定值的元素。

/* 选择所有 `title` 属性中包含 `tutorial` 的元素 */
[title*="tutorial"] {font-style: italic;
}

6.获取html元素写法  

     document.documentElement  

<script>const sk = document.querySelector('.sk')const header = document.querySelector('.header')// 1. 页面滚动事件window.addEventListener('scroll', function () {// 当页面滚动到 秒杀模块的时候，就改变 头部的 top值// 页面被卷去的头部 >=  秒杀模块的位置 offsetTopconst 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>

7.立即执行函数表达式(function() { ... })();

它是一种在定义后立即执行的 JavaScript 函数。IIFE 常用于创建一个封闭的作用域，以避免变量污染全局命名空间。如果写多个一定要用;隔开

(function () {// 代码逻辑
})();

这里的 function () { ... } 定义了一个匿名函数，而外层的括号 (function () { ... }) 将这个匿名函数转换为一个表达式。最后的 () 表示立即调用这个函数表达式。这种方式确保了函数内部定义的所有变量都只在这个函数的作用域内有效，不会影响到外部的环境。

例

  (function () {// 获取元素const entry = document.querySelector('.xtx_entry')const elevator = document.querySelector('.xtx-elevator')// 1. 当页面滚动大于 300像素，就显示 电梯导航// 2. 给页面添加滚动事件window.addEventListener('scroll', function () {// 被卷去的头部大于 300 const n = document.documentElement.scrollTop// if (n >= 300) {//   elevator.style.opacity = 1// } else {//   elevator.style.opacity = 0// }// 简写elevator.style.opacity = n >= entry.offsetTop ? 1 : 0})// 点击返回页面顶部const backTop = document.querySelector('#backTop')backTop.addEventListener('click', function () {// 可读写// document.documentElement.scrollTop = 0// window.scrollTo(x, y)window.scrollTo(0, 0)})})();

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

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

相关文章

TheadLocal出现的内存泄漏具体泄漏的是什么？弱引用在里面有什么作用？什么情景什么问题？

TheadLocal出现的内存泄漏具体泄漏的是什么？弱引用在里面有什么作用？什么情景什么问题？

首先ThreadLocal是什么就不介绍了&#xff01;这篇是讲讲里面的东西。 再简单说一下强引用和弱引用&#xff0c;举个例子&#xff0c;我们平常new出来的对象就是强引用的&#xff0c;在栈中有强引用&#xff0c;所以在gc的时候&#xff0c;堆中的实例对象不会被清除掉。 弱引…
阅读更多...
第一次shell作业

第一次shell作业

#接受用户输入的服务名称 read -p"输入需要部署的服务名称: " server_name if [ "service_name" "nginx" ]; then #判断服务是否安装 if command -v nginx > /dev/null 2>&1; then echo "nginx 已安装" #自定义网…
阅读更多...
MATLAB图注意力网络GAT多标签图分类预测可视化

MATLAB图注意力网络GAT多标签图分类预测可视化

全文链接&#xff1a;https://tecdat.cn/?p38321 本示例展示了如何使用图注意力网络&#xff08;GATs&#xff09;对具有多个独立标签的图进行分类。当数据中的观测值具有带有多个独立标签的图结构时&#xff0c;可以使用GAT来预测未知标签观测值的标签&#xff08;点击文末“…
阅读更多...
CSS优化file控件样式

CSS优化file控件样式

<div class"file-box"><input type"button" class"btn" value"选择文件" /><inputtype"file"class"file"id"upimg"change"previewFiles"multiple/></div><!-- Vu…
阅读更多...
Go语言24小时极速学习教程（三）常见标准库用法

Go语言24小时极速学习教程（三）常见标准库用法

常见标准库 常见标准库即Go语言自带的库&#xff0c;这里的所有包都可以通过import直接引入&#xff0c;如果你觉得实在是不好用&#xff0c;那么请先保证你学会了标准库的基础上&#xff0c;再学一下Gookit&#xff0c;特别是其中的GoUtil&#xff0c;千万不要轻易自己去造轮…
阅读更多...
CTF--php伪协议结合Base64绕过

CTF--php伪协议结合Base64绕过

Base64绕过 在ctf中&#xff0c;base64是比较常见的编码方式&#xff0c;在做题的时候发现自己对于base64的编码和解码规则不是很了解&#xff0c;并且恰好碰到了类似的题目&#xff0c;在翻阅了大佬的文章后记录一下&#xff0c;对于base64编码的学习和一个工具 base64编码是…
阅读更多...
虚拟网卡驱动和DM9000C移植

虚拟网卡驱动和DM9000C移植

网卡驱动程序框架 网卡驱动程序“收发功能”&#xff1a; 只要把上层的数据发给网卡&#xff0c;从网卡来的数据构造成包给上层即可。网卡只需要 “socket”编程&#xff0c;不需要打开某设备。 驱动程序都是以面向对象的思想写的&#xff0c;都有相关的结构体。 编程步骤 …
阅读更多...
image compare pyqt 实现

image compare pyqt 实现

默认显示image1， 鼠标滑动滚动条切换图片显示 可视化效果： image_compare.py import sys from PyQt5.QtWidgets import QApplication, QWidget, QLabel, QSlider, QVBoxLayout, QHBoxLayout from PyQt5.QtCore import Qt, QSize from PyQt5.QtGui import QPixmap, QPainte…
阅读更多...
【单片机基础】定时器/计数器的工作原理

【单片机基础】定时器/计数器的工作原理

单片机中的定时器/计数器&#xff08;Timer/Counter&#xff09;是用于时间测量和事件计数的重要模块。它们可以用来生成精确的延时、测量外部信号的频率或周期、捕获外部事件的时间戳等。理解定时器/计数器的工作原理对于单片机编程和系统设计非常重要。以下是定时器/计数器的…
阅读更多...
在自动驾驶进行大数据量因果推理实验时，如何减少无用功，提高实验效率？

在自动驾驶进行大数据量因果推理实验时，如何减少无用功，提高实验效率？

在对实验结果做反事实推理时&#xff0c;通常需要对数据进行多次循环&#xff0c;然后对多次循环的结果进行处理&#xff0c;如果只在最后结果结束时&#xff0c;再进行处理&#xff0c;可能会由于反事实过程中某个参数设置错误&#xff0c;导致整个反事实实验出现错误&#xf…
阅读更多...
浅谈软件开发中的yield关键字：从餐厅服务理解异步编程之美

浅谈软件开发中的yield关键字：从餐厅服务理解异步编程之美

在现代软件开发中&#xff0c;处理大量数据流时经常会遇到性能和内存消耗的问题。传统的编程方式往往是一次性获取所有数据&#xff0c;这就像餐厅厨师要把所有菜品做完才上菜一样&#xff0c;既不高效也不够灵活。而yield关键字的出现&#xff0c;为我们提供了一种优雅的解决方…
阅读更多...
绕过CDN寻找真实IP

绕过CDN寻找真实IP

在新型涉网案件中&#xff0c;我们在搜集到目标主站之后常常需要获取对方网站的真实IP去进一步的信息搜集&#xff0c;但是现在网站大多都部署了CDN&#xff0c;将资源部署分发到边缘服务器&#xff0c;实现均衡负载&#xff0c;降低网络堵塞&#xff0c;让用户能够更快地访问自…
阅读更多...
前后端请求响应

前后端请求响应

引入 在之前的例子中&#xff0c;我们编写了一个简单的web类&#xff0c;我们运行启动类&#xff0c;启动内嵌的tomcat后就可以在浏览器通过特定的路径访问tomcat中的应用程序。 但之前编写的程序仅仅是个简单的java类&#xff0c;其并未实现某个接口或继承某个类&…
阅读更多...
深度学习：神经网络中的损失函数的使用

深度学习：神经网络中的损失函数的使用

深度学习&#xff1a;神经网络中的损失函数的使用 损失函数是监督学习中的关键组成部分&#xff0c;用于衡量模型预测值与真实值之间的差异。优化算法&#xff08;如梯度下降&#xff09;通过最小化损失函数来调整模型参数&#xff0c;以提高模型的预测精度。以下是几种常用的…
阅读更多...
ThreeJS入门（142）：THREE.WebGLRenderTarget 知识详解，示例代码

ThreeJS入门（142）：THREE.WebGLRenderTarget 知识详解，示例代码

作者&#xff1a; 还是大剑师兰特 &#xff0c;曾为美国某知名大学计算机专业研究生&#xff0c;现为国内GIS领域高级前端工程师&#xff0c;CSDN知名博主&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;webgl&#xff0c;ThreeJS&#xff0c;canvas&#xf…
阅读更多...
GitLab 部署和配置指南

GitLab 部署和配置指南

GitLab 部署和配置指南 1. GitLab 容器配置概述 在部署 GitLab 时&#xff0c;可能涉及以下几部分内容&#xff1a; 内置 Nginx 的配置和调整。HTTPS 证书的申请、使用和续期。通过 FRP 映射内网服务到外部服务器。阿里云服务器的 Nginx 配置和反向代理。 本文将完整涵盖这…
阅读更多...
Streamlit + AI大模型API实现视频字幕提取

Streamlit + AI大模型API实现视频字幕提取

简介 在本文中&#xff0c;我将带你探讨如何使用Streamlit和AI大模型API来实现视频字幕提取的技术。Streamlit是一个开源的Python库&#xff0c;用于快速构建数据应用的Web界面&#xff0c;而AI大模型API&#xff0c;如OpenAI&#xff0c;提供了强大的语言处理能力&#xff0c…
阅读更多...
SpringBoot - spring.profiles.active最佳实践

SpringBoot - spring.profiles.active最佳实践

文章目录 Pre概述为什么需要多环境配置多环境配置实现步骤1. 配置文件准备2. 激活特定环境方法1&#xff1a;命令行参数方法2&#xff1a;环境变量方法3&#xff1a;IDE 配置方法4&#xff1a;全局配置文件默认设置 3. 配置文件加载顺序配置生效的原理 4. 常见问题多个配置文件…
阅读更多...
深入理解 Vue 3 中的 emit

深入理解 Vue 3 中的 emit

深入理解 Vue 3 中的 emit 在 Vue 3 中&#xff0c;组件通信是开发中非常重要的一部分&#xff0c;其中通过 emit 实现父子组件通信是最常见的方式之一。emit 的作用是&#xff1a;子组件可以通过触发自定义事件将数据传递给父组件。 在本篇文章中&#xff0c;我们将从以下几…
阅读更多...
C++结构型设计模式之适配器模式概述

C++结构型设计模式之适配器模式概述

适配器模式的意图和动机 意图&#xff1a;适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;其意图是将一个类的接口转换成客户端所期望的另一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的类可以协同工作。 动机&#xff1a…
阅读更多...
最新文章

Copyright @ 2022~2023