使用 bind() 将多个 arguments 和事件传递给事件处理程序

Question

我想使用.bind解决方案按照这里线程中的一些最新解决方案实现事件处理程序。

但是，假设我的原始处理程序如下：

const clickHandler = (arg1, arg2) => {
   ...do stuff...
}

let var1 = "text1"
let var2 = "text2"
myButton.addEventListener("click", clickHandler.bind(null, var1, var2))

如果我需要向处理程序添加这样的需要event参数的行：

const clickHandler = (arg1, arg2) => {
   event.stopPropagation()
   ...do stuff...
}

如果我不使用.bind ，这将起作用：

const clickHandler = (arg1, arg2) => {
   ...do stuff...
}

let var1 = "text1"
let var2 = "text2"
myButton.addEventListener("click", (event) => {
   event.stopPropagation()
   clickHandler(var1, var2)
})

但是，如果我想使用.bind使其简洁，我应该如何将event传递给处理程序？ 谢谢。

Answer 1

在第一个之后传递给bind()的任何 arguments 在创建时添加到提供给 function 的 arguments 之前，在本例中为event 。 这意味着在生成的绑定回调中， event将是回调接收的最后一个参数，而不是第一个参数，如果不使用绑定则正常。 this保持不变，因为它是一个箭头 function。

如果您在每个bind()中传递一致的已知数量的 arguments，您可以直接访问它们。

const clickHandler = (arg1, arg2, event) => {
...
}

否则，如果绑定的 arguments 的数量会发生变化，您可以通过从arguments迭代器中检索最后一个元素来访问该event 。

const clickHandler = (...args) => {
  const event = args.pop();
...
}

 const myButton = document.getElementById('button'); const clickHandler = (...args) => { const event = args.pop(); console.log(event.target); console.log('args: ', args); } let var1 = "text1" let var2 = "text2" myButton.addEventListener("click", clickHandler.bind(null, var1, var2));

 <button type='button' id='button'>Button</button>