Javascript 使用bind（）将多个参数和事件传递给事件处理程序

我想使用

.bind

解决方案来根据该线程中的一些最新解决方案实现事件处理程序

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

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

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

如果需要向处理程序添加这样一行，它需要

事件

参数：

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

使其简洁，我应该如何将

事件

传递到处理程序中？谢谢。

在第一个参数之后传递到

bind（）

的任何参数都会在创建函数时提供给函数的参数前面，在本例中为

事件

。这意味着在生成的绑定回调中，

事件将是回调接收的最后一个参数，而不是第一个参数，如果不使用绑定，这是正常的<代码>此

保持不变，因为它是一个箭头函数

如果在每个

bind（）

中传递的参数数量一致且已知，则可以直接访问这些参数

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

否则，如果绑定参数的数量不同，则可以通过从

参数

迭代器中检索最后一个元素来访问

事件

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

const myButton=document.getElementById（'button'）；
常量clickHandler=（…参数）=>{
const event=args.pop（）；
console.log（event.target）；
log（'args:'，args）；
}
让var1=“text1”
让var2=“text2”
myButton.addEventListener（“单击”，clickHandler.bind（null，var1，var2））
按钮
您不能在箭头功能中重新绑定此

。看：我知道。那么，我如何在处理程序函数中包含这一行

event.stopPropagation（）

，这样就可以继续使用这一行

myButton.addEventListener（“click”，clickHandler.bind（null，var1，var2））

？基本上，我试图避免使用arrow函数作为处理程序。