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

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

news 2026/2/12 23:50:53
  • 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2026/1/30 4:52:56

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/11/19 6:04:18

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

编程新知 2026/1/26 13:48:59

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

【Veristand】Veristand环境安装教程-Linux RT / Windows

首先声明&#xff0c;此教程是针对Simulink编译模型并导入Veristand中编写的&#xff0c;同时需要注意的是老用户编译可能用的是Veristand Model Framework&#xff0c;那个是历史版本&#xff0c;且NI不会再维护&#xff0c;新版本编译支持为VeriStand Model Generation Suppo…...

编程新知 2026/2/5 20:04:55

如何做好一份技术文档？从规划到实践的完整指南

如何做好一份技术文档&#xff1f;从规划到实践的完整指南 &#x1f31f; 嗨&#xff0c;我是IRpickstars&#xff01; &#x1f30c; 总有一行代码&#xff0c;能点亮万千星辰。 &#x1f50d; 在技术的宇宙中&#xff0c;我愿做永不停歇的探索者。 ✨ 用代码丈量世界&…...

编程新知 2026/2/9 3:23:15

基于 HTTP 的单向流式通信协议SSE详解

SSE&#xff08;Server-Sent Events&#xff09;详解 &#x1f9e0; 什么是 SSE&#xff1f; SSE&#xff08;Server-Sent Events&#xff09; 是 HTML5 标准中定义的一种通信机制&#xff0c;它允许服务器主动将事件推送给客户端&#xff08;浏览器&#xff09;。与传统的 H…...

编程新知 2026/2/12 5:28:21

篇章一 论坛系统——前置知识

目录 1.软件开发 1.1 软件的生命周期 1.2 面向对象 1.3 CS、BS架构 1.CS架构​编辑 2.BS架构 1.4 软件需求 1.需求分类 2.需求获取 1.5 需求分析 1. 工作内容 1.6 面向对象分析 1.OOA的任务 2.统一建模语言UML 3. 用例模型 3.1 用例图的元素 3.2 建立用例模型 …...

编程新知 2026/1/27 0:55:08