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

原生js之dom如何进行事件监听(事件捕获/冒泡)

news 2026/2/10 18:13:53

那么好,这次主要讲解的就是dom是如何进行事件监听和事件取消监听的,我们知道vue中主要用watch来进行监听.

js监听与取消监听

那么原生js主要用到的就是addListenEvent事件来进行监听,可以监听文档dom对象也可以监听浏览器bom对象,监听事件的语法结构如下

Dom/Bom监听

element.addListentEvent(事件类型,调用函数名/function(){},事件捕获/事件冒泡(boolean)(可选))

Dom/Bom取消监听

element.removeEventListener(事件类型,调用函数名/function(){},事件捕获/事件冒泡(boolean)(可选))

简单案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="listen">未点击</div><div id="resizes"></div><div id="remove">移除之</div><script>document.getElementById('listen').addEventListener('click',function () {document.getElementById('listen').innerHTML='已点击'})document.getElementById('listen').addEventListener('click',function(){document.getElementById('listen').innerHTML='二次点击'})document.getElementById("listen").addEventListener("click", displayDate);function displayDate() {document.getElementById("listen").innerHTML = Date();}// 调整窗口大小window.addEventListener('resize',function(){document.getElementById('resizes').innerHTML=Math.random()})// 移除事件元素document.getElementById('remove').addEventListener('click',function(){document.getElementById('listen').removeEventListener('click',displayDate)})</script></body>
</html>

在上述案例中,我们在id为listen的div中,加上了点击的监听事件,那么同时加上两个 不同的函数和一个displaydata方法,那么这三个方法之间是不冲突的,但例如innerHTML属性,用法是替换id的内容,是根据方法的先后调用来进行对应的替换,其实第一个函数中的替换也成功了,但是被第二个函数又替换了.所以正常来说,只要两个函数没有互相冲突的语句,它们是不会互相覆盖的.

同时我们在id为resizes的div中定义了一个window也就是bom的事件监听,只要我们更改的窗口的尺寸,就在第二个div中加一个随机数的内容.

我们在id为remove中的div中,定义了一个移除监听事件的方法,也是点击事件,点击后方法displaydata就不会和第一个listen的div发生关系了.

为什么我们在上述代码中没有用到监听语法格式的第三个布尔值,事件捕获/事件冒泡,那么好,接下来我们就来讲讲什么是事件捕获和事件冒泡,它俩的区别是什么,我们应该在什么时候要使用这个布尔值.

事件捕获和事件冒泡

众所周知,DOM的中文意思就是文档对象,那么在下面代码中,我们知道html head meta body div等元素分别是一个个文档对象,那么文档对象之间有上下级关系,就比如,head的父元素就是html,id为son的div的父元素就是id为father的div

那么我们考虑一个问题
如果id为son的div在id为father的div中,我们给它俩分别设置了两个监听事件,会先调用哪个后调用哪个?
答:先调用id为son的div,再调用id为father的div.

如何实现这个效果呢?
答:从最精确的对象id来进行调用监听事件,再向父元素查找是否有监听事件,一层一层向外去扩展,最后到window对象,就是为什么先调用子元素,后调用父元素的原因,也是事件冒泡的基本原理.

那如果说我们想在点击子元素时,先调用父元素后调用子元素时,那么我们可以考虑用事件捕获来进行进一步的调用,原理:从最外层的window->document->body->div(father)->div(son),也就是从最不精确的对象开始调用,最后的终点才是精确的对象.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="father"><div id="son">1</div></div></body>
</html>

因为在最开始的实例中我们就想用事件冒泡来进行监听,而默认的就是事件冒泡,所以我们并不需要进行第三个参数填写,那么如果我们想用事件捕获来进行监听,则需要使用第三个参数为true来进行调用.接下来是事件捕获的实例代码,

实例:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#father{width:300px;height:300px;border:1px solid gray;position: relative;}#son{width:100px;height:100px;border:1px solid gray;position: absolute;left:0;top:0;}</style></head><body><div id="father"><div id="son">1</div></div><script>document.getElementById('son').addEventListener('click',function(){document.getElementById('son').style.backgroundColor="green"console.log("son")},true)document.getElementById('father').addEventListener('click',function(){document.getElementById('father').style.backgroundColor='blue'console.log("father")},true)</script></body>
</html>

相关文章：

原生js之dom如何进行事件监听(事件捕获/冒泡)

那么好,这次主要讲解的就是dom是如何进行事件监听和事件取消监听的,我们知道vue中主要用watch来进行监听. js监听与取消监听 那么原生js主要用到的就是addListenEvent事件来进行监听,可以监听文档dom对象也可以监听浏览器bom对象,监听事件的语法结构如下 Dom/Bom监听 eleme…...

编程日记 2023/9/8 4:17:22

使用SimPowerSystems并网光伏阵列研究（Simulink实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/9/8 4:16:22

BUUCTF-WEB-[ACTF2020 新生赛]Includel

打开靶机 点击tips 利用Burp抓包&#xff0c;未见异常 但发现了响应头是 PHP/7.3.13 想到了"php://input"伪协议POST发送PHP代码 构建Payload&#xff1a;?filephp://filter/readconvert.base64-encode/resourceflag.php 这里需要注意的是使用php://filter伪协议…...

编程日记 2023/9/8 4:15:21

算法通关村十四关：白银挑战-堆能高效解决的经典问题

白银挑战-堆能高效解决的经典问题 1.在数组中找第K大的元素 LeetCode215 https://leetcode.cn/problems/kth-largest-element-in-an-array/ 思路分析 主要解决方法有3个&#xff0c;选择法&#xff0c;堆查找法和快速排序法 方法1&#xff1a;选择法 先遍历一遍找到最大的…...

编程日记 2023/9/8 4:14:19

跨站请求伪造（CSRF）攻击与防御原理

跨站请求伪造&#xff08;CSRF&#xff09; 1.1 CSRF原理 1.1.1 基本概念 跨站请求伪造&#xff08;Cross Site Request Forgery&#xff0c;CSRF&#xff09;是一种攻击&#xff0c;它强制浏览器客户端用户在当前对其进行身份验证后的Web 应用程序上执行非本意操作的攻击&a…...

编程日记 2023/9/8 4:13:18

从0到1实现播放控制器

这系列文章主要讲诉如何从0到1使用QT实现带时间显示、滚动字幕等的自定义配置视频播放控制器。平时我们乘坐地铁经常看到各条线的播放控制器都大同小异。其实都是通过QT等界面开发软件来实现的。 在具体开发之前&#xff0c;需要明确我们需要做什么&#xff1f; 1. 开发一个可…...

编程日记 2023/9/8 4:12:17

【Vue-Element-Admin】导出el-table全部数据

背景 因为el-table实现了分页查询&#xff0c;所以想要实现el-table需要重新编写一个查询全部数据的方法 查询全部数据 listQuery: export default{return{listQuery:{//page:1,//limit:20,//如果想兼容按条件导出&#xff0c;可以定义查询条件age:undefined,sex:undefined…...

编程日记 2023/9/8 4:11:13

MFC 更改控件的大小和位置

获取当前主窗体的位置rect CRect dlgNow;GetWindowRect(&dlgNow);获取某一个控件当前的位置 CRect rect;CButton* pBtn (CButton*)GetDlgItem(IDC_BUTTONXXX);//获取按钮控件pBtn->GetWindowRect(rect);CWnd* pWnd(CWnd*)GetDlgItem(IDC_EDITXXX);//其它控件&#xff0…...

编程日记 2023/9/8 4:10:12

【向量数据库】相似向量检索Faiss数据库的安装及余弦相似度计算（C++）

目录 简介安装方法安装OpenBLAS安装lapack编译Faiss 代码示例余弦相似度计算输出ID号而非索引的改进版 简介 Faiss 是一个强大的向量相似度搜索库&#xff0c;具有以下优点&#xff1a; 高效的搜索性能&#xff1a;Faiss 在处理大规模向量数据时表现出色。它利用了高度优化的索…...

编程日记 2023/9/8 4:09:11

教育培训小程序的设计与功能解析

随着互联网的发展&#xff0c;线上教育逐渐成为一种趋势&#xff0c;越来越多的人开始选择在线学习。而搭建一个适合自己的线上教育小程序&#xff0c;可以为教育机构或个人提供更好的教学和学习体验。在本文中&#xff0c;我们将介绍如何通过一个第三方制作平台来搭建在线教育…...

编程日记 2023/9/8 4:08:10

【ES】illegal_argument_exception“,“reason“:“Result window is too large

查询ES数据返回错误&#xff1a; {"root_cause":[{"type":"illegal_argument_exception","reason":"Result window is too large, from size must be less than or equal to: [10000] but was [999999]. See the scroll api for…...

编程日记 2023/9/8 4:07:08

SpringBoot实现登录拦截

如果我们不进行登录拦截的话&#xff0c;即使我们跳过登录页面直接去访问任意一个页面也能访问成功&#xff0c;那么登录功能就没有意义&#xff0c;同时也会存在安全问题&#xff0c;因为有些操作是要用户登录后才能执行的&#xff0c;如果用户没有登录&#xff0c;该接口就获…...

编程日记 2023/9/8 4:06:05

浅谈泛在电力物联网、能源互联网与虚拟电厂

导读&#xff1a;从能源互联网推进受阻&#xff0c;到泛在电力物联网名噪一时&#xff0c;到虚拟电厂再次走向火爆&#xff0c;能源领域亟需更进一步的数智化发展。如今&#xff0c;随着新型电力系统建设推进&#xff0c;虚拟电厂有望迎来快速发展。除了国网和南网公司下属的电…...

编程日记 2023/9/8 4:05:04

深度学习框架安装与配置指南：PyTorch和TensorFlow详细教程

如何安装和配置深度学习框架PyTorch和TensorFlow 为什么选择PyTorch和TensorFlow&#xff1f;PyTorchTensorFlow安装PyTorch 步骤1&#xff1a;安装Python步骤2&#xff1a;使用pip安装PyTorch 安装TensorFlow 步骤1&#xff1a;安装Python步骤2&#xff1a;使用pip安装TensorF…...

编程日记 2023/9/8 4:04:03

vue中属性执行顺序

vue中属性的执行顺序 在Vue 2中&#xff0c;组件的生命周期和数据绑定的执行顺序如下&#xff1a; data&#xff1a;首先&#xff0c;组件会调用 data 函数&#xff0c;该函数返回一个对象&#xff0c;该对象的属性和方法会被分配给组件的 $data。init&#xff1a;接下来&…...

编程日记 2023/9/8 4:03:02

【代码随想录】Day 50 动态规划11 （买卖股票Ⅲ、Ⅳ）

买卖股票Ⅲ https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-iii/ 无语了。。。 写的很好就是怎么都过不了。。。 还是就用代码随想录的写法吧。。。 class Solution { public:int maxProfit(vector<int>& prices) {int n prices.size();vector&…...

编程日记 2023/9/8 4:02:01

PHP反序列化漏洞

一、序列化&#xff0c;反序列化 序列化&#xff1a;将php对象压缩并按照一定格式转换成字符串过程反序列化&#xff1a;从字符串转换回php对象的过程目的&#xff1a;为了方便php对象的传输和存储 seriallize() 传入参数为php对象&#xff0c;序列化成字符串 unseriali…...

编程日记 2023/9/8 4:00:59

容器编排学习（一）k8s集群管理

一 Kubernetes 1 概述 就在Docker容器技术被炒得热火朝天之时&#xff0c;大家发现&#xff0c;如果想要将Docker应用于具体的业务实现&#xff0c;是存在困难的一一编排、管理和调度等各个方面&#xff0c;都不容易。于是&#xff0c;人们迫切需要一套管理系统&#xff0…...

编程日记 2023/9/8 3:59:56

js去除字符串空格的几种方式

方法1&#xff1a;(最常用)全部去除掉空格 var str abc d e f g ; function trim(str) { var reg /[\t\r\f\n\s]*/g; if (typeof str string) { var trimStr str.replace(reg,); } console.lo…...

编程日记 2023/9/8 3:58:53

Spring 自带工具——URI 工具UriComponentsBuilder

UriComponentsBuilder 是 Spring Framework 提供的一个实用工具类&#xff0c;用于构建 URI&#xff08;Uniform Resource Identifier&#xff09;。URI 是用于标识和定位资源的字符串&#xff0c;例如 URL&#xff08;Uniform Resource Locator&#xff09;就是一种特殊的 URI…...

编程日记 2023/9/8 3:57:52

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2026/2/10 3:29:01

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2026/2/1 19:26:16

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2026/1/24 6:22:43

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2026/1/24 22:33:33

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2026/2/4 17:51:19

Matlab | matlab常用命令总结

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

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

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2026/1/23 10:28:48

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

编程新知 2025/11/26 18:23:29

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2026/2/9 18:50:34

mac：大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...

编程新知 2026/2/4 0:46:21