【WEB开发.js】addEventListener事件监听器的绑定和执行次数的问题（小心踩坑）
假设我们有一个按钮，用户点击该按钮后，会选择一个文件，且我们希望每次点击按钮时只触发一次文件处理。下面我会给你一个简单的例子，展示放在函数内部和放在函数外部的区别。
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事件监听器的绑定和执行次数的问题（小心踩坑）
假设我们有一个按钮，用户点击该按钮后，会选择一个文件，且我们希望每次点击按钮时只触发一次文件处理。下面我会给你一个简单的例子，展示放在函数内部和放在函数外部的区别。 1. 将事件监听器放在函数内部（问题的根源&…...
用于LiDAR测量的1.58um单芯片MOPA（一）
--翻译自M. Faugeron、M. Krakowski1等人2014年的文章 1.简介 如今，人们对高功率半导体器件的兴趣日益浓厚，这些器件主要用于遥测、激光雷达系统或自由空间通信等应用。与固态激光器相比，半导体器件更紧凑且功耗更低，这在低功率供…...
【GPT】代谢概念解读
以下是对代谢中分解代谢和合成代谢两个概念的深入解读，用简单易懂的方式展开说明： 1. 分解代谢（Catabolism） 什么是分解代谢？ 分解代谢是身体把大分子“拆开”的过程。就像把一个三明治分解成面包片、肉片和菜叶&#…...
Devops-git篇-01-git环境配置
环境配置 设置用户签名 配置用户名： git config --global user.name 你的用户名 配置邮箱： git config --global user.email 注册的邮箱 配置好之后，可以用git config --global --list命令查看配置是否OK $ git config --global --list u…...
STM32 HAL库开发学习1.STM32CubeMX 新建工程
STM32 HAL库开发学习1.STM32CubeMX 新建工程 一、 STM32 CubeMX 下载二、CubeMX 功能介绍1. 固件包路径设置2. 新建工程 三、创建项目实例1. 新建项目2. GPIO 管脚设置3. GPIO 窗口配置4. 调试设置5. 时钟配置6. 项目管理（1）项目信息（2&#…...
JS学习（2）（浏览器执行JS过程、JS的ECMAScript、DOM、BOM）
目录 一、浏览器如何执行JS？ （1）浏览器主要的组成部分。 1、渲染引擎。 2、JS引擎。 （2）演示。 二、JS的组成。 （1）JS主要由三部分组成。 1、JS基础。 2、JS-API。 （2）EC…...
如何解决服务器扫描出的ASP木马问题
随着互联网的发展，网站安全问题日益凸显。其中，ASP（Active Server Pages）木马因其隐蔽性和危害性成为攻击者常用的手段之一。本文将详细介绍如何检测和清除服务器上的ASP木马，以保障网站的安全。 1. ASP木马概述 ASP…...
SpringBoot 架构助力夕阳红公寓管理系统可持续发展战略
摘 要 如今社会上各行各业，都在用属于自己专用的软件来进行工作，互联网发展到这个时候，人们已经发现离不开了互联网。互联网的发展，离不开一些新的技术，而新技术的产生往往是为了解决现有问题而产生的。针对于夕阳红公…...
TCP、HTTP、RPC
一、TCP (Transmission Control Protocol) 定义 TCP（传输控制协议）是一种面向连接、可靠传输的传输层协议，用于在计算机网络中提供端到端的数据通信服务。它是互联网协议套件的一部分，与IP（互联网协议）一…...
《C++ 中 RNN 及其变体梯度问题的深度剖析与解决之道》
在当今人工智能蓬勃发展的浪潮中，递归神经网络（RNN）及其变体长短期记忆网络（LSTM）和门控循环单元（GRU）在处理序列数据方面展现出了强大的潜力。然而，当我们在 C中着手实现这些网络时…...
TypeScript 在 React 中的应用
文章目录 前言一、为什么要在 React 中使用 TypeScript？二、如何在React中使用 TypeScript三、高级类型结语 前言 随着前端开发的复杂度不断提升，开发者对于代码质量、可维护性和开发效率的要求也日益增高。TypeScript 作为一种为 JavaScript 添加静态类…...
黑马2024AI+JavaWeb开发入门Day07-部门管理-日志技术飞书作业
视频地址：哔哩哔哩 讲义作业飞书地址：day07作业 完成新增班级和查询班级的接口开发 1、ClazzController.java package org.example.controller;import lombok.extern.slf4j.Slf4j; import org.example.pojo.Clazz; import org.example.service.Clazz…...
UIlicious - 自动化端到端测试
在现代软件开发中，测试自动化已然成为产品交付质量的基石。而端到端测试（E2E），作为验证整个应用流畅运行的关键，常常是测试工作中最具挑战性的一环。这时，一款简单高效的自动化测试工具——UIlicious&#…...
JMeter中获取随机数、唯一ID、时间日期（包括当前日期增减）截取指定位数的字符等
在JMeter中，您可以使用内置的函数和一些额外的插件来获取随机数、唯一ID、时间日期以及截取指定位数的字符。以下是一些常用的方法： 获取随机数： 使用__Random函数，您可以在指定的最小值和最大值之间生成一个随机数。例如…...
构建自己的docker的ftp镜像
aarch64系统可运行的docker镜像 构建自己的vsftpd镜像，我是在windows系统下的docker desktop中构建运行于aarch64 GNU/Linux系统的ftp镜像。 系统环境： Welcome to Debian GNU/Linux with Linux x.x.x dockerfile FROM ubuntu:latestUSER rootRUN ap…...
人机交互革命，为智能座舱市场激战注入一针「催化剂」
从AIGC到AGI赋能，智能座舱人机交互体验迎来新范式。 不断训练、迭代的大模型，为智能座舱带来了更全面的感知能力、更准确的认知理解，以及更丰富的交互模态，显著提升了其智能化水平。 “AI大模型的快速应用与迭代，推动…...
数据结构复习记录
基本概念 线性表 线性表是最简单也最常用的一种数据结构，是由n( n ≥ 0 n\geq0 n≥0)个类型相同的数据元素组成的有限序列，是一种逻辑结构，有两种表示方式（即存储结构）：顺序表示和链式表示。 栈和队列 栈…...
Qt自定义checkbox实现按下回车键该项打勾
引言 开发环境代码结构示例代码运行效果总结使用qt实现一个列表，列表中每一项中的类似一个checkbox,通过上下键可以切换选中项，按下回车键在已经选中的项前出现对勾。效果如下： 20241203_163929 开发环境 使用ubuntu下QtCreator4.11.。 代码结构 这里将项目的结构截图贴…...
头歌作业 数据库与大数据管理 期末复习资料
1、 下列说法错误的是？c A、UserCF算法推荐的是那些和目标用户有共同兴趣爱好的其他用户所喜欢的物品 B、ItemCF算法推荐的是那些和目标用户之前喜欢的物品类似的其他物品 C、UserCF算法的推荐更偏向个性化 D、UserCF随着用户数目的增大，用户相似度…...
2023年华数杯数学建模A题隔热材料的结构优化控制研究解题全过程文档及程序
2023年华数杯全国大学生数学建模 A题 隔热材料的结构优化控制研究 原题再现： 新型隔热材料 A 具有优良的隔热特性，在航天、军工、石化、建筑、交通等高科技领域中有着广泛的应用。 目前，由单根隔热材料 A 纤维编织成的织物，…...
接口测试中缓存处理策略
在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明： 想象一下，你正在用eNSP搭建一个虚拟的网络世界，里面有虚拟的路由器、交换机、电脑（PC）等等。这些设备都在你的电脑里面“运行”，它们之间可以互相通信，就像一个封闭的小王国。 但是&#…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘
美国西海岸的夏天，再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至，这不仅是开发者的盛宴，更是全球数亿苹果用户翘首以盼的科技春晚。今年，苹果依旧为我们带来了全家桶式的系统更新，包括 iOS 26、iPadOS 26…...
安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业，其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进，需提前预防假检、错检、漏检，推动智慧生产运维系统数据的流动和现场赋能应用。同时，…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作：ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等（ArcGIS出图图例8大技巧），那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
Razor编程中@Html的方法使用大全
文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...
基于Java+VUE+MariaDB实现（Web）仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意：运行前…...
掌握 HTTP 请求：理解 cURL GET 语法
cURL 是一个强大的命令行工具，用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中，cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...