时间戳

首页 > 解决方案 > 使用 bind() 将多个参数和事件传递给事件处理程序

javascript - 使用 bind() 将多个参数和事件传递给事件处理程序

问题描述

我想根据这个线程中的一些最新解决方案在这里.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...
}

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

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

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

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

标签： javascript

解决方案

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

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

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

否则，如果绑定参数的数量不同，您可以通过从迭代器中event检索最后一个元素来访问 。arguments

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>

推荐阅读