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

APIs --- DOM事件进阶

news 2025/12/28 1:32:41

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

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/12/24 12:44:16

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2025/12/25 7:33:23

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/12/22 9:06:24

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2025/12/22 11:06:20

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/10/31 23:08:41

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

编程新知 2025/12/14 14:26:01

破解路内监管盲区：免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

编程新知 2025/12/24 12:19:29

sshd代码修改banner

sshd服务连接之后会收到字符串&#xff1a; SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢&#xff1f; 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头&#xff0c…...

编程新知 2025/12/25 1:14:53