如何在 JavaScript 中将参数传递给事件监听器函数？

事件监听器：向监听器函数传递参数

使用 addEventListener 方法附加事件监听器时，可能存在需要传递参数的情况监听器函数的参数。其中一种场景涉及检索在侦听器范围之外定义的变量的值。

场景和问题

考虑以下代码：

var someVar = some_other_function();
someObj.addEventListener("click", function(){
    some_function(someVar);
}, false);

这里，someVar是在监听器函数外部定义的变量，我们的目标是当发生“点击”事件。但是，在侦听器函数中，someVar 被视为新变量，导致无法访问其预期值的问题。

建议的解决方案：利用事件目标的属性

不要显式传递参数，而是考虑访问事件目标的属性来检索必要的信息。在上面的示例中，您可以将自定义属性 myParam 附加到 someObj，如下所示：

const someInput = document.querySelector('button');
someInput.addEventListener('click', myFunc, false);
someInput.myParam = 'This is my parameter';

function myFunc(evt)
{
  window.alert(evt.currentTarget.myParam);
}

现在，在侦听器函数 myFunc 中，您可以通过引用 evt.currentTarget.myParam 来访问参数值。此方法无需显式传递参数并确保获得正确的值。

以上是如何在 JavaScript 中将参数传递给事件监听器函数？的详细内容。更多信息请关注PHP中文网其他相关文章！