事件监听器:向监听器函数传递参数
使用 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中文网其他相关文章!