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

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

news 2026/5/24 2:40:12

那么好,这次主要讲解的就是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

为什么有些论文，答辩老师越听越不敢卡？

很多学生都经历过一种很明显的反差。有些同学一进答辩室&#xff0c; 老师状态特别紧。问题一个接一个&#xff1b; 追问不断&#xff1b; 语气越来越严肃。但还有一种情况。有些同学刚讲几分钟&#xff0c; 现场气氛就明显变了。老师开始点头&#xff1b; 追问越来越少&#x…...

编程新知 2026/5/24 1:44:02

AI时代的个人隐私与网络安全自保——从账号密码到设备行为的完整体系

一个很多人没做但很简单的事&#xff1a;去搜索一下自己的真实姓名、手机号、家庭住址&#xff0c;看看哪些信息已经公开在网上。知道自己的暴露面&#xff0c;才知道要重点保护什么。 haveibeenpwned是免费、靠谱、隐私友好的数据泄露查询工具。 安全防护不追求完美&#xff0…...

编程新知 2026/5/24 1:41:48

计算机视觉与贝叶斯优化驱动的粉末饮料智能制备系统

1. 项目概述&#xff1a;从“冲一杯”到“冲好一杯”的自动化跃迁“机器人结合计算机视觉与贝叶斯优化实现粉末饮料制备自动化”&#xff0c;这个标题听起来有点学术&#xff0c;但说白了&#xff0c;我们做的就是把冲奶粉、泡蛋白粉、调咖啡这类“凭感觉”的手工活&#xff0c…...

编程新知 2026/5/24 1:31:38

【AI Daily】Arxiv论文研读Top5 | 2026-05-23

&#x1f4da; 每日学习汇总 | 2026-05-23&#xff08;周6&#xff09; &#x1f4ca; 今日概览 今日&#xff1a;周6&#xff0c;午读检索分类&#xff1a;cs.AI / q-bio.NC / cs.HC关键词&#xff1a;cognitive science behavioral AI alignment&#x1f525; 五篇精读速报 ①…...

编程新知 2026/5/24 0:25:22

Invoke-Obfuscation深度解析：PowerShell混淆技术的实战指南与防御策略

Invoke-Obfuscation深度解析&#xff1a;PowerShell混淆技术的实战指南与防御策略 【免费下载链接】Invoke-Obfuscation PowerShell Obfuscator 项目地址: https://gitcode.com/gh_mirrors/in/Invoke-Obfuscation Invoke-Obfuscation是一款专业的PowerShell脚本混淆框架…...

编程新知 2026/5/24 0:05:55

Meta裁了8000人，员工拖着行李箱抢可乐

昨天凌晨4点&#xff0c;Meta很多员工的邮箱同时响了。是裁员邮件。这一次&#xff0c;Meta裁掉了全球约10%的员工&#xff0c;规模大约8000人。分手大礼包&#xff1a;16周基础薪资 每满1年工龄额外2周薪资 18个月全家医保。真正让硅谷炸锅的&#xff0c;反而是裁员前几天&a…...

编程新知 2026/5/23 23:32:40

WxJava 微信开发包 - 新手入门指南

WxJava 微信开发包 - 新手入门指南项目概览项目名称Binary Wang/WxJavaStarsGVP ⭐⭐⭐⭐⭐组织Binary Wang语言Java标签GVP, Java, 微信开发, 微信公众号, 微信支付项目简介WxJava 是一个基于 Java 的微信开发工具包&#xff0c;支持微信公众号、微信支付、小程序、企业微信等…...

编程新知 2026/5/23 23:29:12

宏裕塑胶长玻纤RTP材料技术创新与应用实践

导读&#xff1a;在工程塑料领域&#xff0c;长玻纤增强热塑性材料&#xff08;LFRT&#xff09;正成为高端制造转型的核心驱动力。宏裕塑胶长玻纤RTP材料技术创新与应用实践&#xff0c;通过整合国际顶尖资源与自主改性技术&#xff0c;为汽车轻量化、新能源装备等场景提供高性…...

编程新知 2026/5/23 23:08:29

加拿大AI治理实战：风险分级、监管沙盒与可信AI工程化落地

1. 项目概述&#xff1a;这不是一场技术秀&#xff0c;而是一场制度设计的实战演练“Canada’s AI Ambitions: Navigating the Future of AI Governance”——这个标题里没有一行代码&#xff0c;不提一个模型参数&#xff0c;却直指当前全球AI发展最棘手、最易被忽视的底层命题…...

编程新知 2026/5/23 22:47:50

【混合可再生能源模拟】使用遗传算法优化光伏板和电池的容量附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长毕业设计辅导、数学建模、数据处理、程序设计科研仿真。&#x1f34e;完整代码获取 定制创新 论文复现点击&#xff1a;Matlab科研工作室&#x1f447; 关注我领取海量matlab电子书和数学建模资料 &#x1f3…...

编程新知 2026/5/23 22:08:24