为何EventListener传入匿名函数与外部定义函数表现不同？

核心原因在于匿名函数每次创建都是全新的引用，而命名函数是固定的引用，这直接导致了addEventListener的处理逻辑不同：

1. 匿名函数的问题（code1） #

当你每次切换.active-box时，如果执行类似这样的代码：

document.querySelector('.active-box').addEventListener('click', function() {
  // 切换active类的逻辑
});

这里的匿名函数每次调用addEventListener时都会生成一个全新的函数对象。如果你的切换逻辑中没有先移除之前的事件监听，那么每一次绑定都会给当前激活的box新增一个独立的点击事件。

举个例子：假设你从第一个box切换到第二个时，给第二个box绑定了一次匿名函数；之后切换到第三个时，又给第三个绑定了一次……当你点击第三个box时，它身上可能已经绑定了多次这个匿名函数（如果之前的绑定没清理），一次点击就会触发多次切换逻辑，直接跳过多个box，出现你看到的“被跳过”现象。

而且因为匿名函数没有可复用的引用，你也没法用removeEventListener去移除之前的绑定，只会让绑定的事件越来越多。

2. 命名函数的正常工作逻辑（code2） #

当你使用外部定义的sliderfunction时：

function sliderfunction() {
  // 切换active类的逻辑
}

// 绑定事件时
document.querySelector('.active-box').addEventListener('click', sliderfunction);

sliderfunction是一个固定的函数引用，每次调用addEventListener时传入的都是同一个函数对象。而addEventListener有个特性：对于同一个元素、同一个事件类型、同一个函数，不会重复绑定——哪怕你多次执行绑定代码，元素上也只会保留一个该函数的监听。

所以不管你切换多少次激活状态，给新的box绑定sliderfunction时，不会重复添加，点击时只会触发一次切换逻辑，自然不会出现box被跳过的问题。另外，如果你后续需要移除监听，也可以直接用removeEventListener('click', sliderfunction)，因为有明确的函数引用。

内容的提问来源于stack exchange，提问作者Kondaveti Charan