AddEventListener 行为异常：待办事项应用添加任务按钮响应延迟且控制台输出重复

嘿，我来帮你捋捋这个问题～你遇到的按钮响应慢、控制台输出重复的情况，大概率是重复绑定事件监听搞的鬼！

我刚学JS做项目的时候也踩过这个坑，给你分析下原因：你很可能在某个会反复执行的代码块里（比如渲染待办列表的函数、或者每次添加任务后会重新运行的逻辑里），调用了addEventListener来绑定按钮的点击事件。每次这段代码运行，就会给按钮多绑一次myFunction——到后面，你点一下按钮，myFunction会被触发N次，既因为重复执行逻辑导致响应变慢，控制台的输出自然也会跟着重复出现。

给你几个实用的解决办法：

• 最推荐的：把绑定点击事件的代码，移到只会执行一次的地方，比如页面加载完成后的全局作用域里，或者只会初始化一次的初始化函数中，别放在会反复运行的逻辑（比如更新列表的函数）里面。
• 如果实在没法确定绑定时机，也可以在绑定新监听前先移除旧的：

// 先移除已有的监听，再重新绑定，避免重复
const addBtn = document.querySelector('选择你的添加按钮');
addBtn.removeEventListener('click', myFunction);
addBtn.addEventListener('click', myFunction);

• 还有个小技巧，如果你担心逻辑里还有其他重复绑定的可能，可以用事件委托的方式把监听绑定到父元素上，这样不管列表怎么更新，只需要绑定一次就能处理所有按钮点击，从根源避免重复绑定的问题。

另外也可以顺手检查下myFunction内部有没有不必要的耗时操作，比如反复遍历整个DOM树、嵌套多层循环之类的，这些也会拖慢响应速度，但结合你控制台输出重复的情况，核心问题肯定还是重复绑定事件监听啦～

备注：内容来源于stack exchange，提问作者Hashim Qureshi