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

向 addEventListener 监听器函数传递参数

在某些场景下，可能需要向 addEventListener 的监听器函数传递参数。以下代码片段突出显示了可能需要此操作的常见情况：

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

在这种情况下， someVar 是在侦听器函数外部定义的，但旨在在侦听器函数内使用。但是，由于 JavaScript 的作用域规则，someVar 可能会被识别为侦听器函数内的新变量。

解决方案：从事件目标检索参数

而不是尝试将参数直接传递给侦听器函数，考虑从 event.target 属性获取它们。此方法涉及向事件目标添加自定义属性。

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 的事件侦听器函数。自定义属性 myParam 被添加到按钮并设置为特定值（“这是我的参数”）。

单击按钮时，将使用事件对象作为参数执行 myFunc 函数。通过访问 event.currentTarget 属性，然后访问自定义 myParam 属性，可以检索并显示值（“这是我的参数”）。

此技术允许将参数传递给事件侦听器函数更方便、更可靠的方式。

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