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

【WEB开发.js】addEventListener事件监听器的绑定和执行次数的问题（小心踩坑）

news 2025/9/18 7:39:14

假设我们有一个按钮，用户点击该按钮后，会选择一个文件，且我们希望每次点击按钮时只触发一次文件处理。下面我会给你一个简单的例子，展示放在函数内部和放在函数外部的区别。

1. 将事件监听器放在函数内部（问题的根源）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件监听器放在函数内部</title>
</head>
<body><button onclick="onclickbtnLoadMainLVDS()">点击选择文件</button><input type="file" id="id_file_loadLVDS" style="display:none"><script>function onclickbtnLoadMainLVDS() {document.getElementById('id_file_loadLVDS').click();  // 点击按钮时触发文件选择const fileInput = document.getElementById('id_file_loadLVDS');// 每次点击按钮时，都给文件输入框绑定事件监听器fileInput.addEventListener('change', function(e) {console.log('文件被选择了');});}</script>
</body>
</html>

问题：

  • 在这个例子中，每次点击按钮时，我们都会调用 onclickbtnLoadMainLVDS 函数。
  • 每次函数调用时，都为 input 元素绑定了一个新的 change 事件监听器。
  • 如果你点击按钮 多次，那么就会为同一个文件输入框绑定 多个监听器。
  • 这样，当用户选择文件时，事件会触发 多个监听器，导致相同的事件处理逻辑执行多次。

例如，点击按钮两次会绑定两个监听器，再选择文件时，控制台会输出两次 "文件被选择了"。

2. 将事件监听器放在函数外部（解决问题）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件监听器放在函数外部</title>
</head>
<body><button onclick="onclickbtnLoadMainLVDS()">点击选择文件</button><input type="file" id="id_file_loadLVDS" style="display:none"><script>// 在函数外部绑定一次事件监听器const fileInput = document.getElementById('id_file_loadLVDS');fileInput.addEventListener('change', function(e) {console.log('文件被选择了');});function onclickbtnLoadMainLVDS() {document.getElementById('id_file_loadLVDS').click();  // 点击按钮时触发文件选择}</script>
</body>
</html>

解决问题的方式：

  • 在这个例子中，我们 只在页面加载时 就绑定了一个 change 事件监听器。
  • 无论按钮点击多少次，事件监听器始终只会绑定一次。
  • 这样，每次用户选择文件时，事件只会触发 一次，无论按钮点击多少次。

总结

  • 函数内部绑定事件监听器的坏处：每次点击按钮时都重新绑定事件监听器，导致事件处理程序被多次调用。如果你点击按钮很多次，事件监听器会被重复绑定，最终导致每次文件选择触发多个事件处理。
  • 函数外部绑定事件监听器的好处：事件监听器只会绑定一次，无论用户点击多少次按钮，文件选择时只会触发一次处理程序。

解决方案

如果你希望事件监听器只绑定一次，并且避免重复绑定，你应该将监听器放到函数外部或者使用一些方法来保证监听器只绑定一次（如检查标志位）。

相关文章：

【WEB开发.js】addEventListener事件监听器的绑定和执行次数的问题（小心踩坑）

假设我们有一个按钮&#xff0c;用户点击该按钮后&#xff0c;会选择一个文件&#xff0c;且我们希望每次点击按钮时只触发一次文件处理。下面我会给你一个简单的例子&#xff0c;展示放在函数内部和放在函数外部的区别。 1. 将事件监听器放在函数内部&#xff08;问题的根源&…...

编程日记 2024/12/4 8:10:27

用于LiDAR测量的1.58um单芯片MOPA（一）

--翻译自M. Faugeron、M. Krakowski1等人2014年的文章 1.简介 如今&#xff0c;人们对高功率半导体器件的兴趣日益浓厚&#xff0c;这些器件主要用于遥测、激光雷达系统或自由空间通信等应用。与固态激光器相比&#xff0c;半导体器件更紧凑且功耗更低&#xff0c;这在低功率供…...

编程日记 2024/12/4 8:08:25

【GPT】代谢概念解读

以下是对代谢中分解代谢和合成代谢两个概念的深入解读&#xff0c;用简单易懂的方式展开说明&#xff1a; 1. 分解代谢&#xff08;Catabolism&#xff09; 什么是分解代谢&#xff1f; 分解代谢是身体把大分子“拆开”的过程。就像把一个三明治分解成面包片、肉片和菜叶&#…...

编程日记 2024/12/4 8:06:23

Devops-git篇-01-git环境配置

环境配置 设置用户签名 配置用户名&#xff1a; git config --global user.name 你的用户名 配置邮箱&#xff1a; git config --global user.email 注册的邮箱 配置好之后&#xff0c;可以用git config --global --list命令查看配置是否OK $ git config --global --list u…...

编程日记 2024/12/4 8:05:22

STM32 HAL库开发学习1.STM32CubeMX 新建工程

STM32 HAL库开发学习1.STM32CubeMX 新建工程 一、 STM32 CubeMX 下载二、CubeMX 功能介绍1. 固件包路径设置2. 新建工程 三、创建项目实例1. 新建项目2. GPIO 管脚设置3. GPIO 窗口配置4. 调试设置5. 时钟配置6. 项目管理&#xff08;1&#xff09;项目信息&#xff08;2&#…...

编程日记 2024/12/4 8:03:18

JS学习（2）（浏览器执行JS过程、JS的ECMAScript、DOM、BOM）

目录 一、浏览器如何执行JS&#xff1f; &#xff08;1&#xff09;浏览器主要的组成部分。 1、渲染引擎。 2、JS引擎。 &#xff08;2&#xff09;演示。 二、JS的组成。 &#xff08;1&#xff09;JS主要由三部分组成。 1、JS基础。 2、JS-API。 &#xff08;2&#xff09;EC…...

编程日记 2024/12/4 8:01:16

如何解决服务器扫描出的ASP木马问题

随着互联网的发展&#xff0c;网站安全问题日益凸显。其中&#xff0c;ASP&#xff08;Active Server Pages&#xff09;木马因其隐蔽性和危害性成为攻击者常用的手段之一。本文将详细介绍如何检测和清除服务器上的ASP木马&#xff0c;以保障网站的安全。 1. ASP木马概述 ASP…...

编程日记 2024/12/4 7:59:11

SpringBoot 架构助力夕阳红公寓管理系统可持续发展战略

摘 要 如今社会上各行各业&#xff0c;都在用属于自己专用的软件来进行工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。互联网的发展&#xff0c;离不开一些新的技术&#xff0c;而新技术的产生往往是为了解决现有问题而产生的。针对于夕阳红公…...

编程日记 2024/12/4 7:58:10

TCP、HTTP、RPC

一、TCP (Transmission Control Protocol) 定义 TCP&#xff08;传输控制协议&#xff09;是一种面向连接、可靠传输的传输层协议&#xff0c;用于在计算机网络中提供端到端的数据通信服务。它是互联网协议套件的一部分&#xff0c;与IP&#xff08;互联网协议&#xff09;一…...

编程日记 2024/12/4 7:57:09

《C++ 中 RNN 及其变体梯度问题的深度剖析与解决之道》

在当今人工智能蓬勃发展的浪潮中&#xff0c;递归神经网络&#xff08;RNN&#xff09;及其变体长短期记忆网络&#xff08;LSTM&#xff09;和门控循环单元&#xff08;GRU&#xff09;在处理序列数据方面展现出了强大的潜力。然而&#xff0c;当我们在 C中着手实现这些网络时…...

编程日记 2024/12/4 7:56:08

TypeScript 在 React 中的应用

文章目录 前言一、为什么要在 React 中使用 TypeScript&#xff1f;二、如何在React中使用 TypeScript三、高级类型结语 前言 随着前端开发的复杂度不断提升&#xff0c;开发者对于代码质量、可维护性和开发效率的要求也日益增高。TypeScript 作为一种为 JavaScript 添加静态类…...

编程日记 2024/12/4 7:50:59

黑马2024AI+JavaWeb开发入门Day07-部门管理-日志技术飞书作业

视频地址&#xff1a;哔哩哔哩 讲义作业飞书地址&#xff1a;day07作业 完成新增班级和查询班级的接口开发 1、ClazzController.java package org.example.controller;import lombok.extern.slf4j.Slf4j; import org.example.pojo.Clazz; import org.example.service.Clazz…...

编程日记 2024/12/4 7:46:54

UIlicious - 自动化端到端测试

在现代软件开发中&#xff0c;测试自动化已然成为产品交付质量的基石。而端到端测试&#xff08;E2E&#xff09;&#xff0c;作为验证整个应用流畅运行的关键&#xff0c;常常是测试工作中最具挑战性的一环。这时&#xff0c;一款简单高效的自动化测试工具——UIlicious&#…...

编程日记 2024/12/4 7:45:52

JMeter中获取随机数、唯一ID、时间日期（包括当前日期增减）截取指定位数的字符等

在JMeter中&#xff0c;您可以使用内置的函数和一些额外的插件来获取随机数、唯一ID、时间日期以及截取指定位数的字符。以下是一些常用的方法&#xff1a; 获取随机数&#xff1a; 使用__Random函数&#xff0c;您可以在指定的最小值和最大值之间生成一个随机数。例如&#xf…...

编程日记 2024/12/4 7:43:50

构建自己的docker的ftp镜像

aarch64系统可运行的docker镜像 构建自己的vsftpd镜像&#xff0c;我是在windows系统下的docker desktop中构建运行于aarch64 GNU/Linux系统的ftp镜像。 系统环境&#xff1a; Welcome to Debian GNU/Linux with Linux x.x.x dockerfile FROM ubuntu:latestUSER rootRUN ap…...

编程日记 2024/12/4 7:42:49

人机交互革命，为智能座舱市场激战注入一针「催化剂」

从AIGC到AGI赋能&#xff0c;智能座舱人机交互体验迎来新范式。 不断训练、迭代的大模型&#xff0c;为智能座舱带来了更全面的感知能力、更准确的认知理解&#xff0c;以及更丰富的交互模态&#xff0c;显著提升了其智能化水平。 “AI大模型的快速应用与迭代&#xff0c;推动…...

编程日记 2024/12/4 7:41:47

数据结构复习记录

基本概念 线性表 线性表是最简单也最常用的一种数据结构&#xff0c;是由n( n ≥ 0 n\geq0 n≥0)个类型相同的数据元素组成的有限序列&#xff0c;是一种逻辑结构&#xff0c;有两种表示方式&#xff08;即存储结构&#xff09;&#xff1a;顺序表示和链式表示。 栈和队列 栈…...

编程日记 2024/12/4 7:40:46

Qt自定义checkbox实现按下回车键该项打勾

引言 开发环境代码结构示例代码运行效果总结使用qt实现一个列表，列表中每一项中的类似一个checkbox,通过上下键可以切换选中项，按下回车键在已经选中的项前出现对勾。效果如下： 20241203_163929 开发环境 使用ubuntu下QtCreator4.11.。 代码结构 这里将项目的结构截图贴…...

编程日记 2024/12/4 7:39:45

头歌作业 数据库与大数据管理 期末复习资料

1、 下列说法错误的是&#xff1f;c A、UserCF算法推荐的是那些和目标用户有共同兴趣爱好的其他用户所喜欢的物品 B、ItemCF算法推荐的是那些和目标用户之前喜欢的物品类似的其他物品 C、UserCF算法的推荐更偏向个性化 D、UserCF随着用户数目的增大&#xff0c;用户相似度…...

编程日记 2024/12/4 7:38:44

2023年华数杯数学建模A题隔热材料的结构优化控制研究解题全过程文档及程序

2023年华数杯全国大学生数学建模 A题 隔热材料的结构优化控制研究 原题再现&#xff1a; 新型隔热材料 A 具有优良的隔热特性&#xff0c;在航天、军工、石化、建筑、交通等高科技领域中有着广泛的应用。   目前&#xff0c;由单根隔热材料 A 纤维编织成的织物&#xff0c;…...

编程日记 2024/12/4 7:37:42

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/9/15 5:18:46

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/9/13 17:48:18

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2025/9/16 21:02:35

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/9/11 5:41:27

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

编程新知 2025/7/8 18:12:44

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

编程新知 2025/6/16 3:14:00

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2025/9/6 19:53:03

【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统

Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...

编程新知 2025/7/18 7:59:36

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...

编程新知 2025/7/8 2:31:11