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

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

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

html 复制代码
<!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. 将事件监听器放在函数外部(解决问题)

html 复制代码
<!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 事件监听器。
  • 无论按钮点击多少次,事件监听器始终只会绑定一次。
  • 这样,每次用户选择文件时,事件只会触发 一次,无论按钮点击多少次。

总结

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

解决方案

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

相关推荐
渣渣盟11 分钟前
JavaScript核心概念全解析
开发语言·javascript·es6
huxihua200639 分钟前
各种前端框架界面
前端
拾光拾趣录40 分钟前
GET/POST 的区别:从“为什么登录请求不能用 GET”说起
前端·网络协议
Carlos_sam1 小时前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
java叶新东老师1 小时前
goland编写go语言导入自定义包出现: package xxx is not in GOROOT (/xxx/xxx) 的解决方案
开发语言·后端·golang
拾光拾趣录1 小时前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
檀越剑指大厂1 小时前
【Python系列】Flask 应用中的主动垃圾回收
开发语言·python·flask
拾光拾趣录1 小时前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
檀越剑指大厂2 小时前
【Python系列】使用 memory_profiler 诊断 Flask 应用内存问题
开发语言·python·flask
笠码2 小时前
JVM Java虚拟机
java·开发语言·jvm·垃圾回收