在 JavaScript 中将参数传递给事件侦听器

你可能不知道的 JavaScript 基础知识

Browser window showing web apps

事件是 JavaScript 和 DOM 交互的基本部分。很多时候我们只需要访问事件处理程序中的事件对象。由于默认情况下将事件对象传递给事件处理程序，因此我们无需担心将任何内容传递给函数。但是，在某些情况下，我们确实需要将参数传递给函数。有不同的方法。这是我发现最直观的方式。

当处理程序被重用于不同的事件时，将参数传递给事件处理程序可能特别有用。比如我们想根据点击的是哪个按钮来传递不同的内容，但是函数的逻辑是一样的。在这种情况下，我们应该重用该函数，并且可以只传递不同的内容。

我们从以下代码开始

 功能改变内容（内容）{  
 targetNode.innerText = 内容；  
 } let newContent = "学习本身"; //类似这样的东西，但有一个参数  
 btn.addEventListener("点击", changeContent);

让我们假装 目标节点 也 btn 是引用 DOM 中元素的变量。 目标节点 是我们要替换内容的地方，并且 btn 是应该触发它的按钮。我们需要添加一个事件监听器 btn 我们还想将新内容传递给事件处理程序。

你怎么通过 新内容 作为事件处理程序的参数？

让我们从不可能的事情开始。不能直接将参数传递给函数，因为这与调用函数相同。

 btn.addEventListener("点击", changeContent(newContent)); // 错误的！

效果将与

 更改内容（新内容）；

当该行被解析时，该函数将立即执行。在没有触发事件的情况下执行事件处理程序当然不是我们想要的。此外，当事件触发时，事件处理程序将不会执行。

有效的是使用匿名函数。

 btn.addEventListener("点击", () => { changeContent(newContent) });

这是可行的，因为我们没有像上面那样直接调用该函数。我们正在传递一个函数定义以用作回调函数，该函数在传递参数时调用我们的实际函数。由于外部（匿名）函数调用另一个执行实际工作的函数，我将其称为匿名函数/委托方法。

我们不必在这里使用箭头函数，我们也可以只传递一个普通的匿名函数。 this 关键字会有所不同，具体取决于您在此处的选择，但这是另一篇文章的主题。

 btn.addEventListener("点击", function(){  
 更改内容（新内容）  
 });

我们也可以访问事件对象，但我们需要将它传递给函数并调整函数定义：

 btn.addEventListener("点击", (事件) => {  
 更改内容（事件，新内容）  
 }); 函数更改内容（事件，内容）{  
 targetNode.innerText = 内容；  
 }

由于事件处理程序只不过是一个回调函数，因此您可以使用相同的方法将参数传递给任何其他回调函数。

 setTimeout(function(){ sayHi("@kathimalati") }, 1000); 功能sayHi（姓名）{  
 alert(`嗨 ${name}`);  
 }

与往常一样，有不同的方法来完成我们想要的。还有另一种选择是使用 bindfunction 将值传递给你的函数，但这样你就不会将它作为参数传递。而是通过 this 关键字使其可用。您可以阅读更多相关信息这里 .我选择了匿名函数/委托方法，因为我觉得它最直观。

感谢您的阅读！我希望你喜欢这篇文章。关注我以获取更多 Web 开发见解。