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

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

news 2026/3/30 23:12:55

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

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

Realistic Vision V5.1镜像免配置部署教程：Docker+本地模型路径自动校验

Realistic Vision V5.1镜像免配置部署教程&#xff1a;Docker本地模型路径自动校验 1. 项目概述 Realistic Vision V5.1虚拟摄影棚是基于Stable Diffusion 1.5生态顶级写实模型开发的本地化工具&#xff0c;专为追求摄影级人像效果的用户设计。这个解决方案通过Docker容器化技…...

编程新知 2026/3/30 22:56:10

WindowsCleaner深度解析：如何用开源工具轻松解决C盘空间不足问题

WindowsCleaner深度解析&#xff1a;如何用开源工具轻松解决C盘空间不足问题 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 你是否经常遇到C盘空间不足的困扰&am…...

编程新知 2026/3/30 21:39:04

GEE实战：MODIS NDVI数据高效获取与自动化处理全流程

1. 从零开始认识MODIS NDVI数据 第一次接触遥感数据分析的朋友可能会被各种专业术语搞得晕头转向。别担心&#xff0c;我们先来聊聊这个"MODIS NDVI"到底是什么。简单来说&#xff0c;NDVI&#xff08;归一化差值植被指数&#xff09;就像是给地球做体检的"体温…...

编程新知 2026/3/30 20:34:39

【开题答辩全过程】以 基于Android的收支记账管理系统为例，包含答辩的问题和答案

个人简介一名14年经验的资深毕设内行人&#xff0c;语言擅长Java、php、微信小程序、Python、Golang、安卓Android等开发项目包括大数据、深度学习、网站、小程序、安卓、算法。平常会做一些项目定制化开发、代码讲解、答辩教学、文档编写、也懂一些降重方面的技巧。感谢大家的…...

编程新知 2026/3/30 20:28:36

Windows性能优化：任务管理器深度使用指南

Windows性能优化&#xff1a;任务管理器深度使用指南Windows系统运行缓慢、卡顿&#xff1f;系统自带的任务管理器是诊断和解决性能瓶颈的强大工具。本文将带你深度挖掘Windows任务管理器的各项功能&#xff0c;重点介绍如何利用它进行进程管理、性能监控、启动项优化等操作&am…...

编程新知 2026/3/30 19:19:24

单细胞分析进阶：手把手教你用hdWGCNA挖掘Treg细胞关键基因模块（附完整代码）

单细胞分析进阶&#xff1a;手把手教你用hdWGCNA挖掘Treg细胞关键基因模块&#xff08;附完整代码&#xff09; 在免疫微环境中&#xff0c;调节性T细胞&#xff08;Treg&#xff09;扮演着维持免疫平衡的关键角色。理解这些细胞的基因共表达网络对于揭示其功能机制至关重要。本…...

编程新知 2026/3/30 19:05:02

别再手动发卡了！2025新版ZFAKA搭配宝塔面板，30分钟搞定你的专属自动售卡站

2025年ZFAKA自动售卡系统&#xff1a;零基础30分钟搭建全攻略 在数字商品交易日益火爆的今天&#xff0c;手动处理订单不仅效率低下&#xff0c;还容易出错。想象一下凌晨三点被订单提醒吵醒&#xff0c;手忙脚乱地复制卡密发给买家——这种场景对于个体创业者来说再熟悉不过了…...

编程新知 2026/3/30 18:08:37

别再死记公式了！用Python的SymPy库5分钟搞定雅可比矩阵计算（附机器人学实例）

用SymPy解放双手&#xff1a;5分钟完成雅可比矩阵的符号计算与机器人学应用 记得研究生时期推导机械臂动力学方程&#xff0c;我曾在草稿纸上密密麻麻写满三页偏导数&#xff0c;最后发现一个正负号错误导致全部重算。直到遇见SymPy——这个Python符号计算库彻底改变了我的工作…...

编程新知 2026/3/30 17:20:00

跨平台工具链部署指南：Rust工具集多系统安装与配置实践

跨平台工具链部署指南&#xff1a;Rust工具集多系统安装与配置实践 【免费下载链接】coreutils 跨平台的 Rust 重写 GNU 核心工具集。 项目地址: https://gitcode.com/GitHub_Trending/co/coreutils 基础安装篇&#xff1a;三步完成跨平台部署 零依赖极速部署&#xff…...

编程新知 2026/3/30 17:01:50

从理论到代码：手把手实现Newmark-Beta方法的结构动力学模拟

从理论到代码&#xff1a;手把手实现Newmark-Beta方法的结构动力学模拟 结构动力学模拟是现代工程设计与分析中不可或缺的工具&#xff0c;从桥梁抗震到航天器振动分析&#xff0c;都需要精确预测结构在动态载荷下的响应。而Newmark-Beta方法作为这一领域的经典算法&#xff0c…...

编程新知 2026/3/30 16:03:04