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

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

news 2025/7/6 23:10:37

群山峻岭
文章简介

本篇文章为【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

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2025/7/5 9:34:56

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/6/15 17:37:51

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/6/17 15:52:48

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/7/5 22:15:57

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/7/5 19:48:37

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/7/6 1:15:25

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/7/5 14:11:59

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

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

编程新知 2025/7/5 8:53:25

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/6/21 10:39:11

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/6/21 2:22:29