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

〖大前端 - 基础入门三大核心之JS篇㊶〗- DOM事件传播和事件监听方法addEventListener()

news 2026/4/29 13:49:24
  • 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！
  • 作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 从事过全栈研发、产品经理等工作，目前在公司担任研发部门CTO。
  • 荣誉：2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。
  • 🏆 白宝书系列
    • 🏅 启示录 - 攻城狮的自我修养
    • 🏅 Python全栈白宝书
    • 🏅 ChatGPT实践指南白宝书
    • 🏅 产品思维训练白宝书
    • 🏅 全域运营实战白宝书
    • 🏅 大前端全栈架构白宝书

文章目录

  • ⭐ 事件传播
  • ⭐ addEventListener()方法。

⭐ 事件传播

先来思考一个问题：

当页面的盒子有嵌套时，如果盒子都设置了同样的事件监听，那么事件监听触发的顺序是什么样的呢？比如下面图中，三个盒子都设置了onclick事件监听，当鼠标点击最内侧的盒子时，会触发三个盒子的onclick事件，那这三个事件触发的顺序是怎样的？

image-20230419145411684

我们编写代码来验证一下：

<!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>#box1 {width: 142px;height: 142px;border: 1px solid #000;padding: 20px;}#box2 {width: 102px;height: 102px;border: 1px solid #000;padding: 20px;}#box3 {width: 100px;height: 100px;border: 1px solid #000;}</style>
</head>
<body><div id="box1"><div id="box2"><div id="box3"></div></div></div><script>var oBox1 = document.getElementById('box1');var oBox2 = document.getElementById('box2');var oBox3 = document.getElementById('box3');oBox1.onclick = function () {console.log('鼠标单击box1');};oBox2.onclick = function () {console.log('鼠标单击box2');};oBox3.onclick = function () {console.log('鼠标单击box3');};</script>
</body>
</html>

image-20230419160420907

这种从内到外触发事件的过程就是事件传播的过程。

但事实上，真实的事件传播并不仅仅是由内到外的，而是先从外到内，然后再从内到外，那为什么结果只有从内到外的呢？这是因为onxxx事件监听只能监听后面的一段过程，即从内到外的过程。

**事件的传播：**DOM规定事件传播的方向是先从外到内，再从内到外

从外到内的过程为捕获阶段（capturing phase），从内到外的过程为冒泡阶段（Bubbing phase）

那么问题来了，如何才能监听到捕获阶段呢？这就用到第二种事件监听方法——addEventListener()方法。

在DOM更新过程中，事件监听分成两个级别：DOM0级事件监听和DOM2级事件监听。一开始只有DOM0级事件监听，只能监听到冒泡阶段；在DOM2中新增加了addEventListener()方法，可以监听到捕获和冒泡两个阶段。之所以没有DOM1级，是因为DOM1中没有对事件监听的方法进行更新修改。

⭐ addEventListener()方法。

addEventListener()方法的示例代码：

oBox.addEventListener('click', function(){   //click表示鼠标单击//事件处理函数代码
}, true);//true表示监听捕获阶段，false表示监听冒泡阶段

上面的例子中，用addEventListener()方法监听整个事件传播的过程，代码如下：

<!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>#box1 {width: 142px;height: 142px;border: 1px solid #000;padding: 20px;}#box2 {width: 102px;height: 102px;border: 1px solid #000;padding: 20px;}#box3 {width: 100px;height: 100px;border: 1px solid #000;}</style>
</head>
<body><div id="box1"><div id="box2"><div id="box3"></div></div></div><script>var oBox1 = document.getElementById('box1');var oBox2 = document.getElementById('box2');var oBox3 = document.getElementById('box3');oBox1.addEventListener('click', function () {console.log('我是box1的捕获阶段');}, true);oBox2.addEventListener('click', function () {console.log('我是box2的捕获阶段');}, true);oBox3.addEventListener('click', function () {console.log('我是box3的捕获阶段');}, true);oBox1.addEventListener('click', function () {console.log('我是box1的冒泡阶段');}, false);oBox2.addEventListener('click', function () {console.log('我是box2的冒泡阶段');}, false);oBox3.addEventListener('click', function () {console.log('我是box3的冒泡阶段');}, false);</script>
</body>
</html>

image-20230419191821833

上述代码中，需要注意的是，触发事件监听的顺序跟代码书写的顺序没有关系的，新手可能会误以为两者有关系，我们把捕获和冒泡的代码顺序调一下也不会影响事件传播顺序：

image-20230419194630136

还需注意的是，如果给元素设置相同的两个或多个同名事件时，DOM0级的事件监听后面写的会覆盖先写的；而DOM2级的会按顺序执行。示例代码：

<body><div id="box1"><div id="box2"><div id="box3"></div></div></div><script>var oBox1 = document.getElementById('box1');var oBox2 = document.getElementById('box2');var oBox3 = document.getElementById('box3');oBox2.onclick = function () {   //这个事件监听会被后面的覆盖console.log('A');};oBox2.onclick = function () {console.log('B');};oBox2.addEventListener('click', function () {   //不会被覆盖console.log('C');},true)oBox2.addEventListener('click', function () {   //不会被覆盖console.log('D');},true)</script>
</body>

image-20230419195626656

相关文章：

〖大前端 - 基础入门三大核心之JS篇㊶〗- DOM事件传播和事件监听方法addEventListener()

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…...

编程日记 2023/11/23 19:55:26

Cartographer实现双雷达建图

Urdf修改 <?xml version="1.0" ?> <robot name="robot"><link name="base_link" /><link name="laser_1" /><link name="laser_2" /><link name="laser_link" /><join…...

编程日记 2023/11/23 19:54:25

（离散数学）主析取范式

...

编程日记 2023/11/23 19:52:23

Communications link failure

The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server. Connect timed out. 在本地IDEA中和DBeaver中连接阿里云上MySQL数据库&#xff0c;报以上错误。 在本地可以ping通阿里云公网地址&am…...

编程日记 2023/11/23 19:51:21

XC3320 离线式、无电感交流输入线性稳压器 可替代KP3310 固定5V输出电压

XC3320 是一款紧凑型无电感设计的离线式线性稳压器。XC3320 可获得 5V输出电压。XC3320 是一种简单可靠的获得偏置供电的离线式电源解决方案。XC3320 集成了 650V 功率 MOSFET&#xff0c;启动控制电路,VDD 电压控制电路,AC 交流信号同步检测电路&#xff0c;低压差稳压器等。该…...

编程日记 2023/11/23 19:50:20

导购APP、淘客查券机器人与淘客系统：全面对比与选择

导购APP、淘客机器人与淘客系统&#xff1a;全面对比与选择 在互联网购物的时代&#xff0c;导购APP、淘客机器人和微赚淘客系统成为了消费者们的三大重要工具。它们各具优势&#xff0c;但也存在一些问题。本文将为您详细对比这三种工具&#xff0c;帮助您在购物时做出最合适…...

编程日记 2023/11/23 19:49:19

飞翔的鸟游戏

一.准备工作 首先创建一个新的Java项目命名为“飞翔的鸟”&#xff0c;并在src中创建一个包命名为“com.qiku.bird"&#xff0c;在这个包内分别创建4个类命名为“Bird”、“BirdGame”、“Column”、“Ground”&#xff0c;并向需要的图片素材导入到包内。 二.代码呈现 pa…...

编程日记 2023/11/23 19:48:17

【SpringCloud】为什么选择微服务？

一般的平台会遇到的问题&#xff1a; 服务配置复杂。基础服务多&#xff0c;服务的资源配置复杂&#xff0c;传统方式管理服务复杂 服务之间调用复杂。检索服务、用户中心服务等&#xff0c;服务之间的调用复杂&#xff0c;依赖多 服务监控难度大。服务比较多&#xff0c;…...

编程日记 2023/11/23 19:47:16

基于Python实现汽车销售数据可视化+预测【500010086.1】

导入模块 import numpy as np import pandas as pd from pylab import mpl import plotly.express as px import matplotlib.pyplot as plt import seaborn as sns设置全局字体 plt.rcParams[font.sans-serif][kaiti]获取数据 total_sales_df pd.read_excel(r"./data/中…...

编程日记 2023/11/23 19:46:14

干货分享：好用的两款封面制作工具

无论你是图文博主还是视频博主&#xff0c;做封面都是必不可少的。关于做封面的产品&#xff0c;我推荐两个&#xff1a;如果你使用手机&#xff0c;我推荐使用醒图&#xff1b;如果你使用电脑&#xff0c;我则推荐稿定设计。 01 醒图 为什么醒图如此出色呢&#xff1f; 首先…...

编程日记 2023/11/23 19:45:14

模版模式 设计模式

设计模式 总目录 https://preparedata.blog.csdn.net/article/details/134512591 文章目录 设计模式 总目录一、案例二、抽象类模版 AbstractOrderTemplate&#xff08;顶层的订单抽象类&#xff09;三、执行模版的实现类3.1 默认执行模版 DefaultOrder3.2 其他执行模版 Simlp…...

编程日记 2023/11/23 19:44:13

MySQL锁机制

前置 锁理论 锁总结 锁实践 记录锁 间隙锁 临键锁 对数据库的操作有读、写&#xff0c;组合起来就有 读读、读写、写读、写写&#xff0c;读读不存在安全问题&#xff0c;安全问题加锁都可以解决&#xff0c;但所有的操作都加锁太重了&#xff0c;只有写写必须要求加锁&…...

编程日记 2023/11/23 19:43:12

webpack loader

1、分类 2、执行顺序 配置类型 执行顺序是 loader1>loader2>loader3 3、使用方式 自己的第一个loader 同步loader /*** loader 就是一个函数* 当webpack 解释资源时&#xff0c; 会调用相应的loader去处理* loader 接收到文件内容作为参数&#xff0c;返回文件内容* p…...

编程日记 2023/11/23 19:42:11

Java—学生信息管理系统（简单、详细）

文章目录 一、主界面展示二、学生类三、系统功能方法3.1 main()方法3.2 添加学生信息3.3 删除学生信息3.4 修改学生信息3.5 查看所有学生信息 四、完整代码4.1 Student .Java4.2 StudentManger.Java 前言&#xff1a;本案例在实现时使用了Java语言中的ArrayList集合来储存数据。…...

编程日记 2023/11/23 19:41:10

Spring第一课，了解IDEA里面的文件,回顾Cookie和Session,获取Session,Cookie,Header的方式

目录 IDEA第一课&#xff08;熟悉里面内容&#xff09; 建立连接 -RequestMapping 路由映射 请求 1.传递单个参数​编辑 2.多个参数​编辑 3.传递数组 4.传递一个集合&#xff0c;但是这里我们传递的时候发生了500的错误 简单介绍JSON 回顾Cookie和S…...

编程日记 2023/11/23 19:40:09

AcWing113.特殊排序

题目 有 N N N 个元素&#xff0c;编号 1 , 2.. N 1,2..N 1,2..N&#xff0c;每一对元素之间的大小关系是确定的&#xff0c;关系具有反对称性&#xff0c;但不具有传递性。 注意&#xff1a;不存在两个元素大小相等的情况。 也就是说&#xff0c;元素的大小关系是 N N N…...

编程日记 2023/11/23 19:39:07

数据仓库岗面试

1.自我介绍 2.求用户连续登录3天&#xff0c;要讲出多种解法 解法1&#xff08;使用SQL&#xff09;&#xff1a; SELECTuserid FROMloginrecord WHEREDATEDIFF(day, time, LAG(time) OVER (PARTITION BY userid ORDER BY time)) 1AND DATEDIFF(day, LAG(time) OVER (PARTI…...

编程日记 2023/11/23 19:37:05

企业建数仓的第一步是选择一个好用的ETL工具

当企业决定建立数据仓库&#xff08;Data Warehouse&#xff09;&#xff0c;第一步就是选择一款优秀的ETL&#xff08;Extract, Transform, Load&#xff09;工具。数据仓库是企业数据管理的核心&#xff0c;它存储、整合并管理各种数据&#xff0c;为商业决策和数据分析提供支…...

编程日记 2023/11/23 19:35:03

行情分析 - - 加密货币市场大盘走势（11.23）

大饼昨日又开始了回调&#xff0c;因为FTF消息&#xff0c;而实际还是要下跌的&#xff0c;耐心等待即可。 空单策略&#xff1a;入场37300 止盈34000-33000 止损39000 以太昨日上涨也很激励&#xff0c;目前上涨打了止损&#xff0c;现在入场是好的机会&#xff0c;等待即可。…...

编程日记 2023/11/23 19:34:01

穿山甲SDK 集成·android接入广告·app流量变现

接入穿山甲SDK的app 数独训练APP 广告接入示例: Android 个人开发者如何接入广告SDK&#xff0c;实现app流量变现 接入穿山甲SDK app示例&#xff1a; android 数独小游戏 经典数独休闲益智 随着移动互联网的快速发展&#xff0c;广告成为了许多应用开发者获取收益的主要方…...

编程日记 2023/11/23 19:33:00

别再只用HTTP了！用C#和WebSocket给你的WinForms/WPF程序加个实时数据看板

用C#和WebSocket构建WinForms/WPF实时数据看板的实战指南 在桌面应用开发中&#xff0c;我们经常遇到需要展示实时数据的场景——无论是金融行业的股票行情看板、制造业的设备监控面板&#xff0c;还是企业内部的消息推送中心。传统HTTP轮询方案不仅效率低下&#xff0c;还会给…...

编程新知 2026/4/29 13:37:23

Qwen3.5-4B模型辅助C语言学习：代码调试与指针概念讲解

Qwen3.5-4B模型辅助C语言学习&#xff1a;代码调试与指针概念讲解 1. 为什么需要AI编程助教 学习C语言就像第一次学骑自行车——看着简单&#xff0c;但总会在指针和内存管理这些地方摔跟头。传统教学方式下&#xff0c;学生遇到问题往往要等到下次上课才能问老师&#xff0c…...

编程新知 2026/4/29 13:33:18

告别懵圈！用CANoe实战图解AutoSar网络管理状态机（附报文分析）

CANoe实战&#xff1a;AutoSar网络管理状态机的可视化解析与报文诊断 刚接触AutoSar网络管理的工程师常被其状态机转换逻辑困扰——那些抽象的参数定义和理论描述&#xff0c;在真实车载网络中究竟如何体现&#xff1f;本文将用CANoe捕获的实际报文&#xff0c;结合状态跳变动图…...

编程新知 2026/4/29 13:10:26

MemTrust架构：硬件赋能的零信任AI内存安全系统

1. MemTrust架构概述&#xff1a;硬件赋能的零信任AI内存系统 在AI应用爆炸式增长的今天&#xff0c;内存系统正面临前所未有的安全挑战。传统方案依赖软件层面的加密和访问控制&#xff0c;但内存数据在处理器内部仍以明文形式存在&#xff0c;给侧信道攻击留下了可乘之机。Me…...

编程新知 2026/4/29 12:47:11

如何永久保存微信聊天记录？WeChatMsg完整指南帮你守护数字记忆

如何永久保存微信聊天记录&#xff1f;WeChatMsg完整指南帮你守护数字记忆 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/…...

编程新知 2026/4/29 12:47:11

MCP插件安全沙箱设计揭秘（VS Code 1.90 Beta内测文档节选）：3级权限隔离模型+动态Capability注入机制，规避98.3%的插件越权风险

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;MCP插件安全沙箱设计全景概览 MCP&#xff08;Model Control Protocol&#xff09;插件安全沙箱是保障大模型应用生态可信运行的核心基础设施&#xff0c;其目标是在不牺牲插件功能灵活性的前提下&…...

编程新知 2026/4/29 12:19:48

从MSTAR到SARDet-100K：20个主流SAR数据集下载、标注格式与实战选型指南（2025版）

SAR目标检测数据集实战选型指南&#xff1a;从数据特性到工程落地&#xff08;2025版&#xff09; 当第一次打开HRSID数据集的标注文件时&#xff0c;我被COCO格式里密密麻麻的polygon坐标震撼了——这艘300像素长的货轮被精确勾勒出每一个船舷弧度。而隔壁实验室的博士却对着S…...

编程新知 2026/4/29 11:47:43

GD32F470内存布局详解：为什么你的SRAM只有448KB，以及如何用RT-Thread的memheap管理那64KB TCMSRAM

GD32F470内存架构深度解析&#xff1a;从芯片设计到RT-Thread实战优化 1. 揭开GD32F470内存布局的神秘面纱 第一次拿到GD32F470开发板时&#xff0c;我像大多数从STM32转过来的工程师一样&#xff0c;习惯性地在链接脚本里填上了512KB的RAM配置。结果编译通过的程序运行时却频繁…...

编程新知 2026/4/29 4:02:04

终极内存清理神器：Mem Reduct完整使用指南

终极内存清理神器&#xff1a;Mem Reduct完整使用指南 【免费下载链接】memreduct Lightweight real-time memory management application to monitor and clean system memory on your computer. 项目地址: https://gitcode.com/gh_mirrors/me/memreduct 你的电脑是否经…...

编程新知 2026/4/29 3:22:59

【信创验收倒计时】：Java系统通过等保2.0+国密SM2/SM4+中间件适配的9项必检清单

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;信创验收背景与Java系统国产化适配总体要求 在国家信息技术应用创新战略持续深化的背景下&#xff0c;信创项目验收已从“能用”全面转向“好用、安全、可控”。Java 系统作为政务、金融、能源等关键领…...

编程新知 2026/4/29 2:46:13