当前位置：首页 > news >正文

APIs --- DOM事件进阶

news 2026/2/10 7:27:47

1. 事件流

事件流指的是事件完整执行过程中的流动路径
任意事件被触发时总会经历两个阶段：【捕获阶段】和【冒泡阶段】

事件捕获

概念：从DOM的根元素开始去执行对应的事件（从外到里）

捕获阶段是【从父到子】的传导过程

代码：DOM.addEventListener事件类型, 事件处理函数, 是否使用捕获机制)

addEventListener第三个参数传入true 代表是捕获阶段触发(很少使用)
若传入false代表冒泡阶段触发，默认就是false
若是用L0事件监听，则只有冒泡阶段，没有捕获

const fa = document.querySelector('.father')const son = document.querySelector('.son')// 山东  济南  蓝翔   目标（pink老师）  捕获阶段//  蓝翔  济南   山东   冒泡阶段document.addEventListener('click', function () {alert('我是爷爷')}, true)fa.addEventListener('click', function () {alert('我是爸爸')}, true)son.addEventListener('click', function () {alert('我是儿子')}, true)

事件冒泡

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

冒泡阶段是【从子向父】的传导过程

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

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

const father = document.querySelector(' .father' )
const son = document.querySelector('.son')document.addEventListener( 'click', function (){alert('我是爷爷')
})
fa.addEventListener('click',function () {alert('我是爸爸')
})
son.addEventListener('click', function () {alert("我是儿子')
})

实际工作都是使用事件冒泡为主

阻止冒泡

问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡

前提：阻止事件冒泡需要拿到事件对象

语法：事件对象.stopPropagation()

注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

const father = document.querySelector(' .father' )
const son = document.querySelector('.son')document.addEventListener( 'click', function (){alert('我是爷爷')
})
fa.addEventListener('click',function () {alert('我是爸爸')
})
son.addEventListener('click', function (e) {alert("我是儿子')//组织流动传播e.stopPropagation()
})

解绑事件

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

语法：

//L0事件移除
const btn= document.querySelector(' .button' )
// 绑定事件
btn.onclick = function () {alert('点击了' )
}
// 解绑事件
btn.onclick = null

const btn= document.querySelector(' .button' )
function fn() {alert('点击了')
}
btn.addEventListener('click', fn)
// L2 事件移除解绑
btn.removeEventListener('click',fn)

阻止元素默认行为

某些情况下需要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转

语法： 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>

鼠标经过事件的区别

鼠标经过事件:
mouseover和 mouseout 会有冒泡效果 mouseenter 和 mouseleave 没有冒泡效果(推荐)

两种注册事件的区别

传统on注册 (L0)

同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖偶就可以实现事件的解绑
都是冒泡阶段执行的

事件监听注册 (L2)

语法:addEventListener(事件类型,事件处理函数，是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener(事件类型,事件处理函数取捕获或者冒泡阶段
匿名函数无法被解绑

2. 事件委托

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

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

原理：事件委托其实是利用事件冒泡的特点

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

实现：事件对象.target.tagName可以获得真正触发事件的元素
在这里插入图片描述

<!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>Document</title>
</head><body><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>
</body></html>

3. 其他事件

页面加载事件

load事件

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

原因：

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

事件名：load

监听页面所有资源加载完毕：给window添加load事件

// 页面加载事件
window.addEventListener('load', function() {// 执行的操作
})

DOMContentLoaded

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

事件名：DOMContentLoaded
监听页面DOM加载完毕：给document添加DOMContentLoaded 事件

document.addEventListener( 'DOMContentLoaded', function (){// 执行的操作
}

元素滚动事件

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

原因：很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏、返回顶部

事件名：scroll

监听整个页面滚动：给window或document添加scroll事件

// 页面滚动事件
window.addEventListener('scroll', function() {// 执行的操作
})

获取位置

scrollLeft和scrollTop (属性)

获取被卷去的大小
获取元素内容往左、往上滚出去看不到的距离
这两个值是可读写的

尽量在scroll事件里面获取被卷去的距离

div.addEventListener( 'scroll,function (){console.log(this.scrollTop)
})

在这里插入图片描述

<!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>Document</title><style>body {padding-top: 100px;height: 3000px;}div {display: none;margin: 100px;overflow: scroll;width: 200px;height: 200px;border: 1px solid #000;}</style>
</head><body><div>我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字</div><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.scrollTopif (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>
</body>
</html>

scrollTop (属性)的小细节

<script>document.documentElement.scrollTop = 800window.addEventListener('scroll', function () {// 必须写到里面const n = document.documentElement.scrollTop// 得到是什么数据   数字型 不带单位// console.log(n)})</script>

页面尺寸事件

4. 元素尺寸与位置

APIs --- DOM事件进阶

1. 事件流事件流指的是事件完整执行过程中的流动路径任意事件被触发时总会经历两个阶段：【捕获阶段】和【冒泡阶段】事件捕获概念：从DOM的根元素开始去执行对应的事件（从外到里） 捕获阶段是【从父到子】的传导过程代码&…...

编程日记 2023/4/13 7:46:26

awk命令详解以及使用方法

awk命令详解以及使用方法 awk 是一种文本处理工具，它可以逐行扫描文本文件，根据用户指定的规则进行匹配和处理，并输出结果。awk 的名称来自于三位创始人 Alfred Aho、Peter Weinberger 和 Brian Kernighan 的首字母缩写。 awk 通常用于处理以…...

编程日记 2023/4/13 7:41:25

vue-router3.0处理页面滚动部分源码分析

在使用vue-router3.0时候，会发现不同的路由之间来回切换，会滚动到上次浏览的位置，今天就来看看这部分的vue-router中的源码实现。无论是基于hash还是history的路由切换，都对滚动进行了处理，这里分析其中一种即可。无…...

编程日记 2023/4/13 7:36:24

走心Python实战应用：【requests+re 模块】快速下载原shen图片

人生苦短，我用python 这次给大家带来的是模块实战以便大家理解学习觉得写的好的话，可以给我多多点赞鸭~ 走心Python实战应用：【requestsre 模块】快速下载原shen图片一、理解Python requests 模块二、requests 方法三、ruqusets 模块实战…...

编程日记 2023/4/13 7:31:23

Comparable和Comparator的使用

在Java中，Comparable和Comparator都是用来实现对象排序的接口。 Comparable Comparable是一个内部比较器接口，它允许在类定义时对该类进行自然排序。当实现了Comparable接口的类的对象列表被传递给Collections.sort()方法时，该方法将使用该…...

编程日记 2023/4/13 7:26:22

【OJ每日一练】1121 - 耐摔指数

文章目录一、题目🔸题目描述🔸输入输出🔸样例二、思路解析三、代码参考作者：KJ.JK🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🍂个人博客首页： KJ.JK 💖系列专栏：OJ每日一练一、题目 🔸题目描述 x星球的居民脾气不太好，但好在他…...

编程日记 2023/4/13 7:21:21

vue项目Agora声网实现一对一视频聊天Demo示例（Agora声网实战及agora-rtc-vue使用,新增在线预览地址）

最终效果在线预览地址一、声网简介---->请查看官网二、声网注册---->请自行百度（创建音视频连接需要在Agora注册属于您的appid） 三、具体实现视频聊天步骤 1、实现音视频通话基本逻辑 1、创建对象调用 createClient 方法创建 AgoraRTCCli…...

编程日记 2023/5/13 20:58:40

集成时间序列模型提高预测精度

使用Catboost从RNN、ARIMA和Prophet模型中提取信号进行预测集成各种弱学习器可以提高预测精度，但是如果我们的模型已经很强大了，集成学习往往也能够起到锦上添花的作用。流行的机器学习库scikit-learn提供了一个StackingRegressor，可以用于…...

编程日记 2023/5/12 4:24:01

（详细）《美国节日》：某月的第几个星期几

目录一、题目描述： 二、思路： 1、给定年月日，如何知道这天是星期几？ 2、已知这个月的第一天是星期几，如何知道第三个星期一是几号？ 3、最后一个星期一三、思路总结四、代码一、题目描述&#xf…...

编程日记 2023/5/31 21:56:16

架构设计的历史背景

架构设计的历史背景在探讨架构设计的历史背景时，了解软件开发进化的历史是一个重要的起点。了解软件开发的演变过程可以帮助我们更好地理解架构设计的起源和发展。现在，让我们来简要回顾一下软件开发的历史，并探索软件架构出现的背景。首先…...

编程日记 2023/5/21 21:14:35

C#，初学琼林（06）——组合数的算法、数据溢出问题的解决方法及相关C#源代码

1 排列permutation 排列，一般地，从n个不同元素中取出m（m≤n）个元素，按照一定的顺序排成一列，叫做从n个元素中取出m个元素的一个排列(permutation)。特别地，当mn时，这个排列被称作全…...

编程日记 2023/5/24 20:08:41

MySQL数据库——绘制E-R图：数据库概要设计阶段

在MySQL数据库的概要设计阶段，绘制E-R图是非常重要的一步。E-R图（实体关系图）是一种图形化的工具，用于描述数据库中实体之间的关系。以下是在MySQL数据库概要设计阶段绘制E-R图的步骤： 确定实体：在MySQL数…...

编程日记 2023/5/31 13:17:48

对类和对象的理解

对象：对象是人们要进行研究的任何事物，它不仅能表示具体的事物，还能表示抽象的规则、计划或事件。对象具有状态，一个对象用数据值来描述它的状态。对象还有操作，用于改变对象的状态，对象及其操作就是对象的…...

编程日记 2023/5/14 18:36:32

edge-tts微软文本转语音库，来听听这些语音是否很熟悉？

上期图文教程，我们分享了Azure机器学习的文本转语音的账号申请与API申请的详细步骤，也介绍了基于python3实现Azure机器学习文本转语音功能的代码实现过程，虽然我们可以使用Azure账号免费提供一年的试用期，但是毕竟是要付费的，我们的API也无法长期使用，好在微软发布了edge…...

编程日记 2023/4/13 6:41:13

MySQL更换存储引擎

要更换 MySQL 5.7 中某个表的存储引擎，可以使用以下的 SQL 命令： sql复制代码 ALTER TABLE table_name ENGINEengine_name; 其中，table_name 是需要更换存储引擎的数据表名称，engine_name 则是需要更换成的新存储引擎名称。举…...

编程日记 2023/4/22 23:04:42

filebeat收集不规则多行日志

编程日记 2023/5/13 1:54:52

Token Contrast for Weakly-Supervised Semantic Segmentation

文章来源：[CVPR2023] Keywords：Weakly-Supervised Semantic Segmentation（WSSS）；over-smoothing; ViT 一、本文提出的问题以及解决方案: 本文解决了over-smoothing问题，该问题其实是在之前的GCN网络中提出…...

编程日记 2023/5/21 21:16:22

Jenkins运行在docker中使用Maven构建Java应用程序

这篇笔记是Jenkins入门教程使用Maven构建Java应用程序的一个补充说明，因为我照着文档操作的过程中遇到不少问题，遂一一做个笔记。我的主机是Windows 11，安装的docker是Docker Desktop 4.18.0。第一点，在Windows里执行docker命…...

编程日记 2023/5/27 5:43:35

将excel导入到sqlite的方法代码

Python实现excel转sqlite的方法，具体如下： Python环境的安装配置就不说了，个人喜欢pydev的开发环境。 python解析excel需要使用第三方的库，这里选择使用xlrd 下面是源代码： #!/usr/bin/python # encodingutf-8 Creat…...

编程日记 2023/5/26 19:28:21

Redis主从复制、哨兵和集群部署

文章目录一、主从复制1、主从复制-哨兵-集群2、主从复制的概念3、主从复制的作用4、主从复制流程5、部署Redis 主从复制步骤6、实例操作：部署Redis 主从复制二、哨兵模式1、哨兵模式的原理2、哨兵模式的作用3、哨兵结构由两部分组成，哨兵节点和数据节点4…...

编程日记 2023/5/12 2:47:28

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...

编程新知 2025/6/11 15:25:30

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/12/14 11:45:25

反射获取方法和属性

Java反射获取方法在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

Matlab | matlab常用命令总结

常用命令一、基础操作与环境二、矩阵与数组操作（核心）三、绘图与可视化四、编程与控制流五、符号计算 (Symbolic Math Toolbox)六、文件与数据 I/O七、常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/8/11 1:05:59

2025季度云服务器排行榜

在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...

编程新知 2026/1/23 3:36:07

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/10/14 0:47:25

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

编程新知 2026/2/1 17:50:36

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径卸载应用 adb uninstall 应用包名查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

数据结构：递归的种类（Types of Recursion）

目录尾递归（Tail Recursion） 什么是 Loop（循环）？ 复杂度分析头递归（Head Recursion） 树形递归（Tree Recursion） 线性递归（Linear Recursion）…...

编程新知 2026/2/7 2:25:07

企业大模型服务合规指南：深度解析备案与登记制度

伴随AI技术的爆炸式发展，尤其是大模型（LLM）在各行各业的深度应用和整合，企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者，还是积极拥抱AI转型的传统企业，在面向公众…...

编程新知 2026/2/9 1:32:22