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

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

news 2025/7/6 3:27:50

群山峻岭
文章简介

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

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/7/1 6:36:46

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/7/4 2:16:32

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

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

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/7/4 19:19:18

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2025/7/4 11:41:54

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/6/17 10:29:06

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/7/5 14:25:18

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/6/28 13:23:48

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

编程新知 2025/6/28 13:43:55

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...

编程新知 2025/7/5 10:35:20