在前端开发中，我们通常需要为元素添加事件监听器来实现交互功能。有时候我们需要传递一些参数给监听器函数，在某些情况下，我们还需要移除这个监听器。那么如何使用带参数的函数来添加和移除事件监听器呢？本文将会详细介绍这个问题。
添加事件监听器
添加事件监听器最基本的方式是使用 addEventListener 方法，它可以让我们为指定的元素注册一个特定类型的事件监听器。通常情况下，我们会将监听器函数作为参数传递给 addEventListener 方法，例如：
----- ------ - --------------------------------- -------------------------------- ---------- - ------------------------ ---
在上面的示例中，我们为一个按钮元素注册了一个点击事件的监听器函数。当用户点击这个按钮时，控制台会输出 Clicked!。
如果我们想要在监听器函数中访问其他变量或者调用其他函数，我们可以使用闭包或者箭头函数来创建一个带参数的函数。例如：
----- ------ - --------------------------------- ----- ------- - ------- -------- -------------------------------- ---------- - --------------------- --- -- ------ -------------------------------- -- -- ----------------------
在上面的示例中，我们分别使用闭包和箭头函数来创建了一个带参数的监听器函数，它们都可以访问外部变量 message。
移除事件监听器
移除事件监听器的方式和添加类似，我们可以使用 removeEventListener 方法来移除指定元素上的特定事件监听器。如果我们使用匿名函数或者不同的函数来注册监听器，那么我们需要传递同一个函数来移除监听器。例如：
----- ------ - --------------------------------- -------- ------------- - ------------------------ - -------------------------------- ------------- -- --------------- ----------------------------------- -------------
在上面的示例中，我们为按钮元素注册了一个点击事件的监听器函数 handleClick，然后再用相同的函数来移除这个监听器。如果我们使用匿名函数或者不同的函数来注册监听器，那么 removeEventListener 将无法移除这个监听器。
使用闭包创建带参数的函数
有时候我们需要在监听器函数中访问一些外部变量或者调用其他函数，并且这些变量或者函数不是每次都一样。这时候我们可以使用闭包来创建一个带参数的函数。
----- ------ - ---------------------------------
----- ------- - ------- --------
-------- ------------------ -
------ ---------- -
-----------------
--
-
-------------------------------- ------------------------在上面的示例中，我们定义了一个 createHandler 函数来创建一个带参数的监听器函数。这个函数返回一个闭包，其中包含了传递给 createHandler 的参数 msg。
使用箭头函数创建带参数的函数
如果我们使用箭头函数来创建监听器函数，那么我们可以更加简洁地实现带参数的函数。
----- ------ - --------------------------------- ----- ------- - ------- -------- -------------------------------- -- -- - --------------------- ---
在上面的示例中，我们使用箭头函数来创建一个带参数的监听器函数。由于箭头函数没有自己的 this 和 arguments，所以它们可以通过闭包访问外部变量和参数。
结论
本文介绍了如何使用带参数的函数添加和移除事件监听器。我们可以使用闭包或者箭头函数来创建一个带参数的监听器函数，也可以使用相同的函数来移除监听器
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31407