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

APIs --- DOM事件进阶

news 2025/6/16 19:55:07

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等）加载完毕时触发的事件

原因：

  1. 有些时候需要等页面资源全部处理完了做一些事情
  2. 老代码喜欢把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. 事件流 事件流指的是事件完整执行过程中的流动路径 任意事件被触发时总会经历两个阶段&#xff1a;【捕获阶段】和【冒泡阶段】 事件捕获 概念&#xff1a;从DOM的根元素开始去执行对应的事件&#xff08;从外到里&#xff09; 捕获阶段是【从父到子】的传导过程 代码&…...

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

awk命令详解以及使用方法

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

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

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

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

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

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

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

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

Comparable和Comparator的使用

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

编程日记 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使用,新增在线预览地址）

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

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

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

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

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

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

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

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

架构设计的历史背景

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

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

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

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

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

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

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

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

对类和对象的理解

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

编程日记 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 中某个表的存储引擎&#xff0c;可以使用以下的 SQL 命令&#xff1a; sql复制代码 ALTER TABLE table_name ENGINEengine_name; 其中&#xff0c;table_name 是需要更换存储引擎的数据表名称&#xff0c;engine_name 则是需要更换成的新存储引擎名称。 举…...

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

filebeat收集不规则多行日志

现环境有多行日志输出内容和格式不确定&#xff0c;合并后使用grok默认正则无法收集&#xff0c;需要自己编写正则 日志内容如下&#xff1a; ERROR|2023-04-06 14:27:52|helper|test|http|/api/ad/listBanner|1d60fff861bqwe4b0397be554141eb 127.0.0.1|1b4429-5adb-44d4-acf…...

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

Token Contrast for Weakly-Supervised Semantic Segmentation

文章来源&#xff1a;[CVPR2023] Keywords&#xff1a;Weakly-Supervised Semantic Segmentation&#xff08;WSSS&#xff09;&#xff1b;over-smoothing; ViT 一、本文提出的问题以及解决方案: 本文解决了over-smoothing问题&#xff0c;该问题其实是在之前的GCN网络中提出…...

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

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

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

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

将excel导入到sqlite的方法代码

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

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

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

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

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

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/6/15 4:16:45

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/6/15 11:35:24

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/6/15 23:31:18

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2025/6/15 7:46:33

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/6/15 8:59:06

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

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

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2025/6/14 2:32:02

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/6/15 22:04:17

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/6/15 6:10:15

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2025/6/16 17:39:41