在前端开发中，我们经常需要使用事件侦听器来响应用户的行为，比如点击、鼠标悬停等。事件侦听器有一个重要的特性，就是能够接受参数。本文将介绍如何在注册侦听器时传递参数，并且在该函数内使用它们。
传递参数
我们可以通过两种方式向注册的侦听器函数传递参数：一种是使用匿名函数包裹原函数并传递参数，另一种是使用 bind() 方法。
使用匿名函数
使用匿名函数传递参数的步骤如下：
- 在注册侦听器时，定义一个匿名函数。
- 在匿名函数内调用原函数，并将参数传递给它。
示例代码如下：
----- ------- - ------------------------------------- --------------------------------- ---------- - ------------------- --------- --- -------- ---------------- ----- - ---------------- - - - - ------ -
在这个例子中，我们注册了一个按钮的点击事件侦听器。当用户单击按钮时，浏览器会调用匿名函数，然后该函数再调用 myFunction() 函数，并将两个参数传递给它。myFunction() 函数会将这两个参数拼接成字符串，并将其输出到控制台。
使用 bind()
bind() 方法可以创建一个新函数，该函数与原函数具有相同的代码块，但是预先填充了一些参数。
我们可以使用 bind() 方法来创建一个新的函数并传递参数。示例代码如下：
----- ------- - ------------------------------------- --------------------------------- --------------------- -------- ---------- -------- ---------------- ----- - ---------------- - - - - ------ -
在这个例子中，我们通过调用 bind() 方法来创建一个新函数，并将两个参数作为第二个和第三个参数传递给它。然后我们将该函数作为事件侦听器注册到按钮上。当用户单击按钮时，浏览器会调用该函数，并且该函数会再次调用 myFunction() 函数。
在函数内使用参数
无论使用哪种方式传递参数，我们都可以在函数内部使用它们。
示例代码如下：
----- ------- - ------------------------------------- --------------------------------- ---------- - ------------------- --------- --- -------- ---------------- ----- - ----- -------- - ---- - - - - ----- ----- ------- - ---- ------- --- ------ --- ----- - - --------- --------------------- -
在这个例子中，我们使用了之前介绍的匿名函数方式来注册事件侦听器。当用户单击按钮时，浏览器会调用该函数，并将两个参数传递给 myFunction() 函数。然后我们在函数内部使用这两个参数来创建一个新的字符串，并将其输出到控制台。
总结
本文介绍了如何向注册的事件侦听器传递参数，并在该函数内使用它们。我们可以使用匿名函数或 bind() 方法来传递参数。无论使用哪种方式，我们都可以在函数内部使用这些参数来完成各种任务。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/9317