【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. 将事件监听器放在函数内部（问题的根源&…...
将 x 减到 0 的最小操作数 C++滑动窗口
给你一个整数数组 nums 和一个整数 x 。每一次操作时，你应当移除数组 nums 最左边或最右边的元素，然后从 x 中减去该元素的值。请注意，需要 修改 数组以供接下来的操作使用。 如果可以将 x 恰好 减到 0 ，返回 最小操作数 &#x…...
深入解析 C++ 中的 common_reference_with 和 common_with：设计原理与复杂性
在 C 标准库的设计中，类型之间的兼容性和安全性是至关重要的，尤其是在泛型编程中。为了实现高效且安全的类型推导和转换，C 提供了一些复杂的概念和工具来确保不同类型之间能够正确协同工作。common_reference_with 和 common_with 这两个概念…...
从CPU缓存与指令重排序探讨JMM
目录 问题背景 解决思路 hb关系的应用 原子性问题 问题背景 1. 编译器和CPU优化： 编译器和CPU为了提升单线程程序的性能，会对代码进行优化，如指令重排序、延迟计算等。这些优化在单线程环境下不会影响程序的最终结果，但在多线…...
ETSI EN 300328 标准的一些笔记
ETSI - European Telecommunications Standards Institute 欧洲电信标准化协会 ETSI EN 300328 是欧洲协调标准，此标准适用于工作在2.4G频段范围内运行的宽频传输系统和设备的无线电频谱。 例如 WIFI、Zigbee、蓝牙、 (国内的星闪)。不涵盖UWB。 符合了EN 300328标…...
各大浏览器（如Chrome、Firefox、Edge、Safari）的对比
浏览器如Chrome、Firefox、Edge等在功能、性能、隐私保护等方面各有特点。以下是对这些浏览器的详细对比，帮助你选择合适的浏览器。 1. Google Chrome 市场份额：Chrome是目前市场上最流行的浏览器，约占全球浏览器市场的65%以上。 性能&#…...
AD7606使用方法
AD7606是一款8通道最高16位200ksps的AD采样芯片。5V单模拟电源供电，真双极性模拟输入可以选择10 V，5 V两种量程。支持串口与并口两种读取方式。 硬件连接方式： 配置引脚 引脚功能 详细说明 OS2 OS1 OS2 过采样率配置 000 1倍过采样率 …...
神经网络介绍)
双向长短期记忆(Bi-LSTM)神经网络介绍
长短期记忆(Long Short-Term Memory, LSTM)神经网络： 1.是Hochreiter和Schmidhuber设计的循环神经网络(Recurrent Neural Network, RNN)的改进版本。LSTM模型借鉴了人类大脑的选择性输入和选择性遗忘机制，获取序列中的关键信息，遗忘和当前预测…...
openGauss开源数据库实战十八
文章目录 任务十八 openGauss逻辑结构:构:用户和权眼管理任务目标实施步骤一、准备工作二、用户和角色管理1.使用CREATE USER语句创建用户2.使用CREATE ROLE语句创建用户3.删除用户和角色 三、权限管理1.系统权限清理工作 任务十八 openGauss逻辑结构:构:用户和权眼管理 任务目…...
JVM 性能调优 -- JVM 调优常用网站
前言： 上一篇分享了 JDK 自带的常用的 JVM 调优命令和图形化界面工具，本篇我们分享一下常用的第三方辅助 JVM 调优网站。 JVM 系列文章传送门 初识 JVM（Java 虚拟机） 深入理解 JVM（Java 虚拟机） 一文搞…...
现在的电商风口已经很明显了
随着电商行业的不断发展，直播带货的热潮似乎正逐渐降温，而货架电商正成为新的焦点。抖音等平台越来越重视货架电商，强调搜索功能的重要性，预示着未来的电商中心将转向货架和搜索。 在这一转型期，AI技术与电商的结合为…...
基于AT89C52单片机的电子时钟与温湿度检测系统
✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏…...
Wwise SoundBanks内存优化
1.更换音频格式为Vorbis 2.停用多余的音频，如Random Container的随机脚步声数量降为2个 3.背景音乐勾选“Stream”。这样就让音频从硬盘流送到Wwise，而不是保存在内存当中，也就节省了内存 4.设置最大发声数Max Voice Instances 5.设置音频…...
Next.js 独立开发教程（十三）：错误处理（Error Handling）
系列文章目录 Next.js 开发教程(一)：入门指南-CSDN博客 Next.js 开发教程（二）：从零构建仪表盘应用-CSDN博客 Next.js 开发教程（三）：CSS 样式的完整指南-CSDN博客 Next.js 独立开发教程&…...
【Halcon】边缘检测算子汇总（一）
frei_amp 功能：使用Frei-Chen算法检测图像的边缘振幅。 参数： 输入图像（Image）：待处理的原始图像。输出梯度图像（ImageEdgeAmp）：经过Frei-Chen算法处理后的边缘振幅图像。工作原理：frei_amp算子通过计算图像一阶导数的近似值来检测边缘。它使用两个特定的滤波器掩模（…...
前端开发中Token存储：选择Cookie还是localStorage？
在现代前端开发领域，用户身份验证与状态管理不可或缺，而 token 作为身份验证机制的核心要素，对保障用户信息安全至关重要。然而，token 的存储方式对应用安全性和用户体验有着直接影响。本文将从安全性、便捷性和使用场景等维度，深度剖析在 Cookie 和 localStorage 中选择存…...
Scala中的正则表达式01
规则类型具体规则示例说明单字符大多数字符匹配自身正则表达式 abc，文本 abca 匹配 a，b 匹配 b，c 匹配 c方括号 [ ][ ] 定义字符集，匹配其一[abc]，文本 a、b 或 c[abc] 匹配 a、b 或者 c排除字符集 [^ ][^ ] 开头加 ^&…...
机器学习——决策树模型
决策树是如何工作的？ 假设你在经营一家猫收养中心，并提供了一些功能，你想训练一个分类器来快速告诉你，动物到底是不是猫，这里有10个训练例子，并与这10个例子中的每一个相关联，我们将有关于动物…...
#3003. Jed‘s MEX
刚开始直接硬来，要么TLE要么WA 后面改成另一种思路： 先把ai大于n的全都转换为刚好小于n的数，记录在cnt[i]中，代表ai有多少个 然后从高往低走，把cnt大于1的分到下面去，使数尽可能分布得广一些 然后从低往…...
数据集增强：提升深度学习模型泛化能力的关键技术
在深度学习中，数据是模型性能的基石。大规模、高质量的数据集通常能显著提高模型的泛化能力，帮助模型在真实场景中做出更准确的预测。然而，在很多实际应用中，数据收集困难、昂贵或者受限，尤其是当数据集相对较小或标注…...
JS实现高效导航——A*寻路算法+导航图简化法
一、如何实现两点间路径导航 导航实现的通用步骤，一般是： 1、网格划分 将地图划分为网格，即例如地图是一张图片，其像素为1000*1000，那我们将此图片划分为各个10*10的网格，从而提高寻路算法的计算量。 2、标…...
在wordpress添加自定义文章类型
实现思路 在Once主题中，有文章，页面等编辑的文案类型，文章类型主要做文案输出，而页面类型主要做一些界面菜单的操作。参考文章类型，使用自定义页面模板，实现一个自定义文章类型，例如**笔记(nod…...
[node.js] [HTTP/S] 实现 requests 发起 HTTP/S/1.1/2.0 请求
node.js 使用 V8 引擎来编译运行 javascript 代码，与浏览器中的环境不同的是，node.js 不包含 DOM 和 BOM 模块。 本文使用 node.js 的官方库来实现一个简单的 requests() 函数，可以用来发送 HTTP/1.1 和 HTTP/2.0 的请求。有关 HTTP/1.1 和 …...
基于Java Springboot线上约拍摄影预约微信小程序
一、作品包含 源码数据库全套环境和工具资源部署教程 二、项目技术 前端技术：Html、Css、Js、Vue、Element-ui uniapp 数据库：MySQL 后端技术：Java、Spring Boot、MyBatis 三、运行环境 开发工具：IDEA/eclipse 微信开发者工…...
node.js基础学习-cheerio模块-简单小爬虫（五）
学习cheerio模块，简单做一个爬取图片网站的图片，并且将这些图片下载到本地指定的文件夹下，很多图片网站都有一些反爬取的机制，找的好几个都会报302错误，所以我找了一个小的图片网站，这个没有反爬取机制&…...
)
吾杯网络安全技能大赛WP(部分)
吾杯网络安全技能大赛WP(部分) MISC Sign 直接16进制解码即可 原神启动 将图片用StegSolve打开 找到了压缩包密码 将解出docx文件改为zip 找到了一张图片和zip 再把图片放到stegSlove里找到了img压缩包的密码 然后在document.xml里找到了text.zip压缩包密码 然后就出来fl…...
【python自动化一】pytest的基础使用
1.pytest简述 pytest 是一个功能强大且灵活的Python测试框架，其主要是用于流程控制，具体用于UI还是接口自动化根据个人需要而定。且其具有丰富插件，使用时较为方便。咱们具体看下方的内容，本文按照使用场景展开，不完…...
使用 CFD 仿真进行阀门性能分析：第 II 部分
了解如何使用 Ansys Discovery 通过优化模式获得准确的阀门性能结果。 第 II 部分：优化模式下的模拟 阀门的模拟可以在 Explore （探索） 模式和 Refine （优化） 模式下执行。Explore 模式允许快速仿真，在长达…...
Node.js实现WebSocket教程
Node.js实现WebSocket教程 1. WebSocket简介 WebSocket是一种在单个TCP连接上提供全双工通信的协议，允许服务器和客户端之间进行实时、双向通信。本教程将详细讲解如何在Node.js中实现WebSocket。 2. 技术选型 我们将使用ws库来实现WebSocket服务器，…...
使用 Statsmodels 进行统计建模与分析
使用 Statsmodels 进行统计建模与分析 Statsmodels 是 Python 中一个功能强大的库，用于执行统计建模和计量经济学分析。它提供了一系列经典的统计模型和评估方法，涵盖线性回归、时间序列分析和广义线性模型等。 本文将带你深入了解 Statsmodels 的功能…...
【Linux】进程间通信
目录 一、管道 （一）概念 （二）匿名管道 1、概念 2、函数介绍 3、示例代码 4、原理 （三）命名管道 1、概念 2、函数介绍 3、示例代码 4、原理 （四）管道的读写规则 &#x…...
Python 网络爬虫高级教程：分布式爬取与大规模数据处理
经过基础爬虫和进阶爬虫的学习，我们已经掌握了爬虫的基本原理、动态内容处理及反爬机制的应对。然而，当我们面对海量数据或需要高效爬取多个站点时，分布式爬虫和数据存储、处理能力就显得尤为重要。本篇博客将带你迈向网络爬虫的高级阶段&…...
猫爪背后的情感密码
当家中那只可爱的猫咪时不时用它的小爪子轻拍我们时，很多人或许只当作是调皮捣蛋，实则背后大有深意。 猫用爪子打，可能是在向我们发出玩耍的邀约。在猫咪的天性里，捕猎本能根深蒂固。它们在幼年时与同伴的嬉戏打闹，便…...
【自用】管材流转项目前端重部署流程 vue2 webpackage4 vuecli4
一、配置 1.下载项目，使用 IDEA 打开，并配置 Nodejs 它提示我，需要 Node.js，因为 nodejs 14 的 installer 已经官网已经找不到了，使用 fnm 又太麻烦， 所以直接采用在 IDEA 中下载的方式就好了。 2.清除缓…...
)
关于c的子进程 fork()
fork() 是一个非常重要的系统调用，用于在 Unix-like 操作系统中创建一个新的进程。它会将当前进程（父进程）复制成一个新的进程（子进程）。子进程会从父进程的代码处继续执行，但具有不同的进程 ID。 fork() …...
耀圣控制设备有限公司：优质压滤机阀门的引领者
耀圣控制设备有限公司：优质压滤机阀门的引领者 在压滤机阀门领域，耀圣控制设备有限公司以其卓越的品质和领先的技术，成为了行业内备受瞩目的品牌。 耀圣控制设备有限公司专注于压滤机阀门的研发与生产，凭借着先进的工艺和严格的质…...
【C语言】结构体（四）
本篇重点是typedef关键字 一，是什么？ typedef用来定义新的数据类型，通常typedef与结构体的定义配合使用。 简单来说就是取别名 ▶ struct 是用来定义新的数据类型——结构体 ▶ typedef是给数据类型取别名。 二，为什么…...
面向源代码的软件可信度量模型 T_{na}
面向源代码的软件可信度量模型 T n a T_{na} Tna 课程：软件质量分析 作业 可编写下面的java程序： package org.example;public class SourceCodeOrientedModel {public static void main(String[] args) {int total 41;int[] m {9, 22, 9, 5, 7, 1…...
Java11使用JVM同一日志框架启用日志记录
你可以使用-Xlog选项配置或启用Java虚拟机同一日志框架的日志记录。 -Xlog:gc*trace:file/Users/xx/gc-%t.log:time,tags,level,pid,tid,hostname,path:filecount3,filesize10K -Xlog:gc*trace:stdout:time,tags,level,pid,tid,hostname:filecount3,filesize10K -Xlog:gc*trac…...
k8s容器存储接口 CSI 相关知识
容器存储接口 CSI 相关知识 参考： https://blog.csdn.net/lovely_nn/article/details/122880876 https://developer.aliyun.com/article/783464 https://www.cnblogs.com/varden/p/15139819.html存储商需实现 CSI 插件的 NodeGetVolumeStats 接口，Kube…...
JDBC相关
请解释一下 JDBC 是什么？ JDBC（Java Database Connectivity）是 Java 语言访问数据库的标准 API。它提供了一套统一的接口，使得 Java 程序能够与各种不同的数据库进行交互。 请说明一下 JDBC 连接池的使用方法和优势。 使用方法…...
Github提交Pull Request教程 Git基础扫盲（零基础易懂）
1 PR是什么？ PR，全称Pull Request（拉取请求），是一种非常重要的协作机制，它是 Git 和 GitHub 等代码托管平台中常见的功能，被广泛用于参与社区贡献，从而促进项目的发展。 PR的整个过…...
【计算机网络】实验7：默认路由和特定主机路由以及路由环路问题
实验 7：默认路由和特定主机路由以及路由环路问题 一、 实验目的 了解默认路由以及特定主机路由。 了解静态路由配置错误导致的路由环路问题。 二、 实验环境 • Cisco Packet Tracer 模拟器 三、 实验内容 1、默认路由以及特定主机路由 (1) 第一步ÿ…...
RK3506 PINCTRL学习
引脚命名规则 Rockchip Pin 的 ID 按照 控制器 (bank) 端口 (port) 索引序号 (pin) 组成。 GPIO（通⽤输⼊输出） 控制器和GPIO控制器数量一致；端口固定A/B/C/D索引序号固定为0/1/2/3/4/5/6/7 每个控制器可以控制32个IO，作为GPIO功…...
NS4828 0.8A 线性同步移动电源管理芯片
1 特性 ● 内置固定 0.8A 的线性充电模式 ● 涓流/恒流/恒压三段式充电，支持 0V 电池充电 ● 充电输入端有防反灌功能，不需要防反灌二极管 ● 0.8A同步升压转换器 ● 同步放电固定 5.1V 输出 ● 双灯充放电 LED 灯指示 ● 支持自动负载检测 ● 双灯充电与…...
重生之学C++篇—算术操作符
一、算术操作符 在写代码的时候，一定会涉及到计算。为了方便运算，C提供了一系列的操作符，其中有一组操作符叫做算术操作符。分别是： 、 - 、 * 、 / 、 %，这些操作符都是双目操作符（有两个操作数ÿ…...
人机交互革命，为智能座舱市场激战注入一针「催化剂」
从AIGC到AGI赋能，智能座舱人机交互体验迎来新范式。 不断训练、迭代的大模型，为智能座舱带来了更全面的感知能力、更准确的认知理解，以及更丰富的交互模态，显著提升了其智能化水平。 “AI大模型的快速应用与迭代，推动…...
《只狼》运行时提示“mfc140u.dll文件缺失”是什么原因？“找不到mfc140u.dll文件”要怎么解决？教你几招轻松搞定
《只狼》运行时提示“mfc140u.dll文件缺失”的科普与解决方案 作为一名软件开发从业者，在游戏开发和维护过程中，我们经常会遇到各种运行时错误和系统报错。今天，我们就来探讨一下《只狼》这款游戏在运行时提示“mfc140u.dll文件缺失”的原因…...
VTK中矩阵vtkMatrix4x4类的介绍和使用
1、矩阵-齐次坐标介绍 常见的点一般是Pt（X,Y,Z），相当于一个13矩阵，而矩阵相乘的话一般是第一个矩阵的列数要等于第二个矩阵的行数。此处需要引入齐次坐标的概念：从广义上讲，齐次坐标就是用n1维向量表示n 维…...
STM32的OTA
STM32的OTA（Over-The-Air）是一种通过无线通信方式，为设备分发新软件、配置甚至更新加密密钥的技术。以下是对STM32 OTA的详细介绍： 一、OTA升级概述 OTA升级允许中心位置向所有用户发送更新，确保每个接收者都无法拒绝…...