在前端开发中，我们常常需要使用事件监听器来响应用户的操作。当一个事件被触发时，相应的函数会被执行。但有时候我们需要取消已经添加的事件监听器，这就需要用到 removeEventListener 方法。
什么是匿名函数？
在 JavaScript 中，我们可以定义一个函数并将其赋值给一个变量，也可以直接将一个函数作为参数传递给另一个函数。如果不需要在其他地方再次使用该函数，我们可以选择使用匿名函数。
匿名函数没有函数名，只有 function 关键字和它的参数和主体。例如：
var myFunction = function() {
alert('hello');
};上面的例子中，myFunction 就是一个匿名函数。
使用匿名函数添加事件监听器
在实际的前端开发中，我们经常会使用匿名函数来添加事件监听器。例如：
document.addEventListener('click', function(event) {
console.log('click event occurred!');
});上面的代码中，我们使用匿名函数作为回调函数来处理 click 事件。
如何使用 removeEventListener 取消匿名函数绑定的事件监听器？
一般情况下，我们使用 removeEventListener 来取消已经添加的事件监听器。但是如果我们使用匿名函数添加事件监听器，该如何取消呢？
答案是很简单的：我们需要将匿名函数保存到一个变量中，然后在需要取消事件监听器时使用该变量来指定回调函数。例如：
-- -------------------- ---- ------- --- ---------- - --------------- - ------------------ ----- ------------ -- ---------------------------------- ------------ -- -------------- --------------------- - ------------------------------------- ------------ -- ------
上面的代码中，我们将匿名函数赋值给了 myFunction 变量，并使用该变量来添加事件监听器。当需要取消事件监听器时，我们可以使用该变量来指定回调函数。
深入理解匿名函数和 removeEventListener
使用匿名函数添加事件监听器虽然方便，但也存在一些问题。首先，由于匿名函数没有名称，难以在其他地方重用，增加了代码量和维护成本。其次，在取消事件监听器时，我们需要将匿名函数保存到一个变量中，这可能会导致作用域泄漏和内存泄漏等问题。
因此，在实际的开发中，建议使用具名函数或箭头函数来添加事件监听器。这样既可以避免作用域泄漏和内存泄漏等问题，同时还可以提高代码的可读性和重用性。
示例代码
下面是一个使用具名函数添加事件监听器的示例代码：
-- -------------------- ---- ------- -------- ------------------ - ------------------ ----- ------------ - ---------------------------------- ------------- -- -------------- --------------------- - ------------------------------------- ------------- -- ------
结论
在 JavaScript 中，我们可以使用匿名函数来添加事件监听器。但是，在取消事件监听器时，需要将该匿名函数保存到一个变量中，这可能会导致作用域泄漏和内存泄漏等问题。因此，建议使用具名函数或箭头函数来添加事件监听器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13869