使用 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>