Javascript addEventListener找到了什么标记

Question

我在一些html标签中添加了一个Javascript事件监听器。我必须对不同的标签进行相同的处理。使用常用功能会很不错。

（1）有没有办法将变量传递给传递给addEventListener的函数。

 const theNode = document.querySelector(
  "div.action-bar:not(.usertip-mobile-action-bar) div.dropdown button.button-white");
 theNode.addEventListener("click",
                           processClickReply,
                           false);

（2）“this”会在我的函数processClickReply中引用“theNode”吗？

Answer 1

有没有办法将变量传递给传递给addEventListener的函数。

是的，有两种方式：

1）通过闭合（但请注意this现在是闭合中的theNode，但不是processClickReply，所以你可能想要明确地传递它 - 或者记住它在evt.target中）：

let myVar = 84;
theNode.addEventListener(
  "click",
  function(evt) {
    processClickReply(evt, this, myVar);
  },
  false
);

2）通过绑定（我们可以明确地将this设置为theNode和myVar为第一个参数）：

let myVar = 84;
theNode.addEventListener(
  "click",
  processClickReply.bind(theNode, myVar),
  false
);

“this”会在我的函数processClickReply中引用“theNode”吗？

在您的代码中，如果将processClickReply声明为传统函数，则会执行此操作。如果它被定义为箭头函数，那么没有。

在传递参数的两种方法中，您可以看到它们如何破坏this的自然绑定，以及可以采取哪些对策来绕过它。

另请注意，绑定和闭包会给您不同的行为：如果稍后更改myVar，则更改将反映在闭包代码中;但绑定代码当时使用myVar的值。

Answer 2

1：使用匿名功能：

theNode.addEventListener("click", function() { processClickReply(value) }, false);

2：是的