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

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

news 2026/2/8 21:37:19

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

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

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

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

编程新知 2026/1/22 6:07:24

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2026/1/24 7:56:15

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2026/1/31 13:42:15

从零开始打造 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修改…...

编程新知 2026/2/5 12:11:18

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2026/1/29 2:30:31