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

【JavaScript 漫游】【022】事件模型

news 2026/5/13 15:27:29

群山峻岭
文章简介

本篇文章为【JavaScript 漫游】专栏的第 022 篇文章，对 JavaScript 中事件模型相关的知识点进行了总结。

监听函数

浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式。

JavaScript 有三种方法，可以为事件绑定监听函数。

  • HTML 的 on- 属性
  • 元素节点的事件属性
  • EventTarget.addEventListener()

HTML 的 on- 属性

HTML 语言允许在元素的属性中，直接定义某些事件的监听代码。

<body onload="doSomething()">
<div onclick="console.log('触发事件')">

注意，这些属性的值是将会执行的代码，而不是一个函数。

<!-- 正确 -->
<body onload="doSomething()"><!-- 错误 -->
<body onload="doSomething">

一旦指定的事件发生，on- 属性的值是原样传入 JavaScript 引擎执行。因此如果要执行函数，不要忘记加上一对圆括号。

使用这个方法指定的监听代码，只会在冒泡阶段触发。

<div onclick="console.log(2)"><button onclick="console.log(1)">点击</button>
</div>

直接设置 on- 属性，与通过元素节点的 setAttribute() 设置 on- 属性，效果是一样的。

el.setAttribute('onclick', 'doSomething()');
// 等同于
// <Element οnclick="doSomething()">

元素节点的事件属性

元素节点对象的事件属性，同样可以指定监听函数。

window.onload = doSomething;div.onclick = function (event) {console.log('触发事件');
};

使用这个方法指定的监听函数，也是只会在冒泡阶段触发。

它和 HTML 的 on- 属性的差异是，它的值是函数名 doSomething，而不像后者，必须给出完整的监听代码 doSomething()。

EventTarget.addEventListener()

所有 DOM 节点实例都有 addEventListener()，用来为该节点定义事件的监听函数。

window.addEventListener('load', doSomething, false);

小结

上面三种方法，第一种“HTML 的 on- 属性”，违反了 HTML 与 JavaScript 代码相分离的原则，将两者写在一起，不利于代码分工，因此不推荐使用。

第二种“元素节点的事件属性”的缺点在于，同一个事件只能定义一个监听函数，也就是说，如果定义两次 onclick 属性，后一次定义会覆盖前一次。因此，也不推荐使用。

第三种 EventTarget.addEventListener() 是推荐的指定监听函数的方法。它有如下优点：

  • 同一个事件可以添加多个监听函数
  • 能够指定在哪个阶段（捕获阶段还是冒泡阶段）触发监听函数
  • 除了 DOM 节点，其他对象（比如 window、XMLHttpRequest 等）也有这个接口，它等于是整个 JavaScript 统一的监听函数接口。

this 的指向

监听函数内部的 this 指向触发事件的那个元素节点。

事件的传播

一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。

  • 第一阶段：从 window 对象传导到目标节点（上层传导底层），称为捕获阶段（capture phase）
  • 第二阶段：在目标节点上触发，称为目标阶段（target phase）
  • 第三阶段：从目标节点传导回 window 对象（从底层传回上层），称为冒泡阶段（bubbling phase）

这种三阶段的传播模型，使得同一个事件会在多个节点上触发。

<div><p>点击</p>
</div>

事件的代理

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。

var ul = document.querySelector('ul');ul.addEventListener('click', function (event) {if (event.target.tagName.toLowerCase() === 'li') {// some code}
});

如果希望事件到某个节点为止，不再传播，可以使用事件对象的 stopPropgation 方法。

// 事件传播到 p 元素后，就不再向下传播了
p.addEventListener('click', function (event) {event.stopPropagation();
}, true);// 事件冒泡到 p 元素后，就不再向上冒泡了
p.addEventListener('click', function (event) {event.stopPropagation();
}, false);

stopPropgation 方法只会阻止事件的传播，不会阻止该事件触发 <p> 节点的其他 click 事件的监听函数。也就是说，不是彻底取消 click 事件。

p.addEventListener('click', function (event) {event.stopPropagation();console.log(1);
});p.addEventListener('click', function(event) {// 会触发console.log(2);
});

如果想要彻底取消该事件，不再触发后面所有 click 的监听函数，可以使用 stopImmediatePropgation 方法。

p.addEventListener('click', function (event) {event.stopImmediatePropagation();console.log(1);
});p.addEventListener('click', function(event) {// 不会被触发console.log(2);
});

相关文章：

【JavaScript 漫游】【022】事件模型

文章简介 本篇文章为【JavaScript 漫游】专栏的第 022 篇文章&#xff0c;对 JavaScript 中事件模型相关的知识点进行了总结。 监听函数 浏览器的事件模型&#xff0c;就是通过监听函数&#xff08;listener&#xff09;对事件做出反应。事件发生后&#xff0c;浏览器监听到…...

编程日记 2024/2/27 10:42:59

【加密算法】RSA非对称加密算法简介

目录 前言 工作原理 密钥生成 加密和解密 在Java中使用RSA 生成密钥对 加密和解密数据 加密数据 解密数据 注意事项和最佳实践 结论 前言 RSA&#xff08;Rivest-Shamir-Adleman&#xff09;是一种基于数论的非对称加密算法&#xff0c;广泛应用于数字签名、数据加密…...

编程日记 2024/2/27 10:41:58

深入理解 JavaScript 对象原型，解密原型链之谜（上）

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2024/2/27 10:34:51

产品经理学习-产品运营《什么是SOP》

目录 什么是SOP 如何执行SOP 执行SOP的重点 什么是SOP SOP就是项目流程操作的说明书 日常工作中的例行操作&#xff1a; 例行操作是指&#xff0c;在每一天&#xff0c;针对每一个用户&#xff0c;在每个项目之中&#xff0c;都必须完成的操作&#xff0c;这些必须完成的操…...

编程日记 2024/2/27 10:29:45

大数据Hadoop生态圈

存储&#xff1a; HDFS(namenode,datanode) 计算&#xff1a;MapReduce(mapreduce&#xff0c;基于磁盘) 便于用sql操作&#xff1a;Hive(核心 metastore&#xff0c;存储这些结构化的数据)&#xff0c;同类的还有Impala&#xff0c;hbase等 基于yaml的资源调度 hive &…...

编程日记 2024/2/27 10:25:41

算法简介：查找与算法运行时间

文章目录 1. 二分查找与简单查找1.1 运行时间 2. 旅行商问题 算法是一组完成任务的指令。任何代码片段都可以视为算法。 1. 二分查找与简单查找 二分查找是一种算法&#xff0c;其输入是一个有序的元素列表&#xff0c;如果要查找的元素包含在列表中&#xff0c;二分查找返回…...

编程日记 2024/2/27 10:17:32

零基础C++开发上位机--基于QT5.15的串口助手（三）

本系列教程本着实践的目的&#xff0c;争取每一节课都带大家做一个小项目&#xff0c;让大家多实践多试验&#xff0c;这样才能知道自己学会与否。 接下来我们这节课&#xff0c;主要学习一下QT的串口编程。做一款自己的串口助手&#xff0c;那么这里默认大家都是具备串口通信…...

编程日记 2024/2/27 10:13:28

Facebook的虚拟社交愿景：元宇宙时代的新起点

在当今数字化时代&#xff0c;社交媒体已经成为人们生活中不可或缺的一部分。而随着科技的不断进步和社会的发展&#xff0c;元宇宙已经成为了人们关注的热点话题之一。作为社交媒体的领军企业之一&#xff0c;Facebook也在积极探索虚拟社交的未来&#xff0c;将其视为元宇宙时…...

编程日记 2024/2/27 10:12:25

【深度学习笔记】4_6 模型的GPU计算

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 4.6 GPU计算 到目前为止&#xff0c;我们一直在使用CPU计算。对复杂的神经网络和大规模的数据来说&#xff0c;使用CPU来计算可能不够…...

编程日记 2024/2/27 10:11:24

留学申请过程中如何合理使用AI？大学招生官怎么看？

我们采访过的学生表示&#xff0c;他们在写essay的过程中会使用 ChatGPT&#xff0c;主要用于以下两个方面&#xff1a;第一&#xff0c;生成想法和头脑风暴&#xff1b;第二&#xff0c;拼写和语法检查。 纽约时报的娜塔莎辛格&#xff08;Natasha Singer&#xff09;在一篇文…...

编程日记 2024/2/27 10:10:23

vue2与vue3的diff算法有什么区别

在 Vue 中&#xff0c;虚拟 DOM 是一种重要的概念&#xff0c;它通过将真实的 DOM 操作转化为对虚拟 DOM 的操作&#xff0c;从而提高应用的性能。Vue 框架在虚拟 DOM 的更新过程中采用了 Diff 算法&#xff0c;用于比较新旧虚拟节点树&#xff0c;找出需要更新的部分&#xff…...

编程日记 2024/2/27 10:09:22

ES小总结

组合查询 FunctionScoreQueryBuilder functionScoreQuery QueryBuilders.functionScoreQuery(boolQuery,new FunctionScoreQueryBuilder.FilterFunctionBuilder[]{new FunctionScoreQueryBuilder.FilterFunctionBuilder(QueryBuilders.termQuery("isAD",true),Score…...

编程日记 2024/2/27 10:05:18

vue2与vue3中父子组件传参的区别

本次主要针对vue中父子组件传参所进行讲解 一、vue2和vue3父传子区别 1.vue2的父传子 1).在父组件子标签中自定义一个属性 <sonPage :子组件接收到的类名"传输的数据">子组件</sonPage> 2).在子组件中peops属性中拿到自定属性 props: {子组件接收的…...

编程日记 2024/2/27 10:04:16

使用vuetify实现全局v-alert消息通知

前排提示&#xff0c;本文为引流文&#xff0c;文章内容不全&#xff0c;更多信息前往&#xff1a;oldmoon.top 查看 简介 使用强大的Vuetify开发前端页面&#xff0c;结果发现官方没有提供简便的全局消息通知组件&#xff08;像Element中的ElMessage那样&#xff09;&#xf…...

编程日记 2024/2/27 10:02:14

CentOS 7.9上编译wireshark 3.6

工作环境是Centos 7.9&#xff0c;原本是通过flathub安装的wireshark&#xff0c;但是在gnome的application installer上升级到wireshark 4.2.3之后就运行不起来了&#xff0c;flatpak run org.wireshark.Wireshark启动提示缺少qt6&#xff0c;查了一下wireshark新版是依赖qt6的…...

编程日记 2024/2/27 10:01:13

初学学习408之数据结构--数据结构基本概念

初学学习408之数据结构我们先来了解一下数据结构的基本概念。 数据结构&#xff1a;是相互之间存在一种或多种特定关系的数据元素的集合。 本内容来源于参考书籍《大话数据结构》与《王道数据结构》。除去书籍中的内容&#xff0c;作为初学者的我会尽力详细直白地介绍数据结构的…...

编程日记 2024/2/27 9:54:02

Java项目中必须使用本地缓存的几种情况

Java项目中必须使用本地缓存的几种情况 在Java项目的开发过程中&#xff0c;为了提高应用的性能和响应速度&#xff0c;缓存机制经常被使用。其中&#xff0c;本地缓存作为一种常见的缓存方式&#xff0c;将数据存储在应用程序的本地内存或磁盘中&#xff0c;以便快速访问。下…...

编程日记 2024/2/27 9:53:01

【鸿蒙 HarmonyOS 4.0】TypeScript开发语言

一、背景 HarmonyOS 应用的主要开发语言是 ArkTS&#xff0c;它由 TypeScript&#xff08;简称TS&#xff09;扩展而来&#xff0c;在继承TypeScript语法的基础上进行了一系列优化&#xff0c;使开发者能够以更简洁、更自然的方式开发应用。值得注意的是&#xff0c;TypeScrip…...

编程日记 2024/2/27 9:52:00

Android java基础_异常

一.异常的概念 在Java中&#xff0c;异常&#xff08;Exception&#xff09;是指程序执行过程中可能出现的不正常情况或错误。它是一个事件&#xff0c;它会干扰程序的正常执行流程&#xff0c;并可能导致程序出现错误或崩溃。 异常在Java中是以对象的形式表示的&#xff0c;…...

编程日记 2024/2/27 9:46:54

高数考研 -- 公式总结(更新中)

1. 两个重要极限 (1) lim ⁡ x → 0 sin ⁡ x x 1 \lim _{x \rightarrow 0} \frac{\sin x}{x}1 limx→0​xsinx​1, 推广形式 lim ⁡ f ( x ) → 0 sin ⁡ f ( x ) f ( x ) 1 \lim _{f(x) \rightarrow 0} \frac{\sin f(x)}{f(x)}1 limf(x)→0​f(x)sinf(x)​1. (2) lim ⁡…...

编程日记 2024/2/27 9:43:51

Jira、ONES、ClickUp 对比：哪款研发管理软件更适合中国研发团队？

快速迭代的互联网和软件行业&#xff0c;研发团队的效率管理工具几乎决定了产品交付的速度与质量。研发管理软件不仅是“任务分派”的工具&#xff0c;更是团队 需求管理、版本迭代、缺陷跟踪、研发效能度量 的基础设施。 目前市面上主流的研发管理软件众多&#xff0c;不同工…...

编程新知 2026/5/13 14:49:10

告别混乱！用Cadence Allegro SPB17.4从DXF文件创建PCB封装的完整清洁流程

告别混乱&#xff01;用Cadence Allegro SPB17.4从DXF文件创建PCB封装的完整清洁流程 在PCB设计领域&#xff0c;从机械图纸&#xff08;DXF&#xff09;快速创建精确的封装是工程师常面临的挑战。许多设计师都经历过这样的困扰&#xff1a;导入DXF后&#xff0c;封装在3D预览中…...

编程新知 2026/5/13 14:47:07

STM32F103C6/RC + HC-SR04超声波测距：Proteus 8.9仿真避坑与LCD1602显示实战

STM32F103C6/RC HC-SR04超声波测距&#xff1a;Proteus 8.9仿真避坑与LCD1602显示实战 在嵌入式开发的学习过程中&#xff0c;仿真工具为我们提供了极大的便利&#xff0c;尤其是对于资源有限或硬件条件不足的开发者来说&#xff0c;Proteus仿真软件无疑是一把利器。然而&…...

编程新知 2026/5/13 14:32:57

收藏必备！小白程序员轻松入门大模型：RAG架构详解与实践

本文详细介绍了检索增强生成&#xff08;RAG&#xff09;架构&#xff0c;旨在帮助初学者理解大模型如何结合外部知识库提升回答的准确性和时效性。文章涵盖了RAG的四种架构类型、黑盒与白盒增强策略、知识库构建、查询与检索增强方法&#xff0c;以及系统评估和优化增强过程。…...

编程新知 2026/5/13 11:13:22

5分钟终极指南：用Nexus Mods App告别模组管理噩梦

5分钟终极指南&#xff1a;用Nexus Mods App告别模组管理噩梦 【免费下载链接】NexusMods.App Home of the development of the Nexus Mods App 项目地址: https://gitcode.com/gh_mirrors/ne/NexusMods.App 还在为游戏模组冲突、依赖缺失而烦恼吗&#xff1f;Nexus Mod…...

编程新知 2026/5/13 11:13:21

ChatLLM-Web：快速构建LLM Web应用的轻量级框架解析

1. 项目概述&#xff1a;一个面向开发者的轻量级LLM Web应用框架 最近在折腾大语言模型本地部署和Web应用开发的朋友&#xff0c;可能都遇到过类似的困境&#xff1a;模型推理的后端代码写好了&#xff0c;但想做个界面给非技术同事或者自己用&#xff0c;就得从头搭一套前端&a…...

编程新知 2026/5/13 8:49:12

不用OWL/RDF！Function 和 Action 在本体智能平台中的重要性体现

—— 从“语义建模”走向“可执行本体智能” 很多人初次接触企业级本体&#xff0c;总会陷入固有认知&#xff1a;将本体等同于传统知识图谱&#xff0c;或是OWL/RDF这类语义网标准的商业落地&#xff0c;执着于用标准化语法表达概念、关系与推理规则。行业内也有Palantir这类平…...

编程新知 2026/5/13 8:33:09

工程师视角：礼品卡系统设计缺陷分析与安全消费指南

1. 从“设计工具”到“消费陷阱”&#xff1a;一位工程师的假日购物避坑指南又到年底了&#xff0c;办公室里讨论“给客户/团队送什么礼物好”的声音又多了起来。作为一名在电子设计自动化&#xff08;EDA&#xff09;和可编程逻辑工具领域泡了十几年的工程师&#xff0c;我习惯…...

编程新知 2026/5/13 8:17:12

AI编程工具的内卷：Copilot、Cursor、通义灵码，谁能笑到最后？

当“内卷”的风吹到AI编程工具2026年&#xff0c;AI编程工具已不再是新鲜事物&#xff0c;而是开发者工具箱中的标配。从最初的代码补全&#xff0c;到如今的全栈智能体&#xff0c;这个赛道正经历着一场前所未有的“内卷”。GitHub Copilot、Cursor、通义灵码三足鼎立&#xf…...

编程新知 2026/5/13 8:03:33

Windows右键菜单为何变得臃肿？ContextMenuManager帮你重新掌控

Windows右键菜单为何变得臃肿&#xff1f;ContextMenuManager帮你重新掌控 【免费下载链接】ContextMenuManager &#x1f5b1;️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是否曾为Windows右键菜单的混乱而烦…...

编程新知 2026/5/13 7:15:19