事件监听器中回调函数传递差异：箭头函数写法失效原因解析

第一段代码的正常逻辑 #

getImageBtn.addEventListener("click", getMatchingCatsArray);

这段代码是把getMatchingCatsArray函数直接作为回调引用绑定到按钮的点击事件上。当按钮被点击时：

• 浏览器会自动将点击事件的事件对象（比如MouseEvent实例）作为第一个参数传入getMatchingCatsArray（如果你的函数定义了参数，就能正常接收）；
• 函数内部的this默认指向触发事件的元素，也就是getImageBtn；
• 后续如果需要移除该监听器，直接调用removeEventListener("click", getMatchingCatsArray)即可生效，因为传递的是同一个函数引用。

第二段代码的无效原因 #

getImageBtn.addEventListener("click", getMatchingCatsArray => {
    
});

这段代码完全无法触发预期逻辑，核心问题是：你定义了一个空的箭头函数作为回调，这个箭头函数内部根本没有调用getMatchingCatsArray。当按钮被点击时，浏览器只会执行这个空函数，自然不会有任何效果。

补充：如果是箭头函数包裹调用原函数的常见误区 #

假设你原本想写的是这种写法：

getImageBtn.addEventListener("click", () => getMatchingCatsArray());

它和直接传函数名的差异主要有三点：

1. 事件参数传递：直接传函数名时，浏览器会自动把事件对象传给原函数；但用箭头函数包裹的话，若原函数需要事件参数，必须手动传递，比如(e) => getMatchingCatsArray(e)，否则原函数拿不到事件对象。
2. this指向变化：箭头函数没有独立的this，它的this继承自外层作用域（比如全局作用域或外层函数的this），而不是触发事件的getImageBtn。如果getMatchingCatsArray里依赖this指向按钮的逻辑，这种写法会直接失效。
3. 监听器移除困难：因为传递的是匿名箭头函数，后续无法通过removeEventListener移除这个监听器（必须传递同一个函数引用才能移除）。

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