JavaScript与HTML开发中Event listener未正确移除问题咨询

结论 #

你的推测完全正确，该问题属于典型的事件监听泄漏问题。

问题原因 #

• 每次加载新图片时，你仅为新图片的交互元素绑定了事件监听，没有清理上一张图片对应元素绑定的旧监听函数，旧监听会一直驻留内存，持续响应后续的交互动作。
• 当下一张图片的istrue判定结果与上一张不同时，用户触发交互后会同时调用新旧两个监听函数，两个函数分别基于所属图片的istrue值做正确性判定，就会出现两张图片的答案都被识别为正确的异常表现。

验证方法 #

打开浏览器开发者工具的「元素(Elements)」面板，找到绑定交互事件的DOM节点，查看「事件监听器(Event Listeners)」列表，每切换一次图片如果该节点的监听数量同步增加，即可直接确认问题根因。

修复方案 #

• 方案1：切换图片前主动调用removeEventListener移除旧监听，注意removeEventListener传入的函数引用必须和addEventListener绑定的函数引用完全一致，不要直接用匿名函数作为监听回调，否则无法正常移除。
• 方案2：改用事件委托实现，将交互事件统一绑定在页面中不会被销毁的父级节点上，通过事件冒泡判断当前触发交互的元素所属的图片，不需要频繁增删事件监听，从根源避免该类问题。

内容的提问来源于stack exchange，提问作者Programmer Developement