Vanilla Javascript 使用带有 REST 参数的 bind()

Question

为什么 bind() 甚至传递带剩余参数的事件类型。如何避免传递事件 'click'?

function say(...numbers) {
  for (const number of numbers) {
    console.log(number);
  }
}

window.addEventListener('DOMContentLoaded', () => {
  const el = document.getElementById('input_10_5');
  el.addEventListener('click', say.bind(null, 1, 2, 3));
});

Console.log 结果：

1
2
3 
click { target: input#input_10_5.medium, buttons: 0, clientX: 1062, clientY: 732, layerX: 96, layerY: 24

}

Answer 1

你不能。事件处理系统总是传递事件。

The callback function itself has the same parameters and return value as the handleEvent() method; that is, the callback accepts a single parameter: an object based on Event describing the event that has occurred, and it returns nothing.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_event_listener_callback

如果您的目标是迭代参数并一视同仁，那么如何： function say(numbers, event) say.bind(null, [1, 2, 3])

Answer 2

此行为与剩余参数无关 ...。它更多地与 .bind() 的行为有关。当您使用参数绑定函数时（在本例中您使用了 1, 2, 3），调用该绑定函数会导致将这些绑定参数传递给函数 first，然后跟进通过您调用绑定函数的任何其他参数，例如：

function foo(one, two, three, evt) {
  console.log(one, two, three, evt);
}

const bar = foo.bind(null, 1, 2, 3);
bar({type: "click"}); // becomes the 4th argument (after 1, 2, 3)

在幕后，JavaScript 正在使用事件对象调用您传递给 .addEventListener() 的绑定函数，最终成为 say 函数的第四个参数。然后将其作为 numbers 数组的一部分包含在内。您可以创建一个包装函数来传递 event（您忽略），然后使用 .call() 调用您的函数（在这里使用 .call() 而不是仅 () 允许您可以像使用 .bind()):

那样显式定义 this 值

window.addEventListener('DOMContentLoaded', () => {
  const el = document.getElementById('input_10_5');
  el.addEventListener('click', () => say.call(null, 1, 2, 3));
});

Answer 3

看看the documentation:

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

你无法阻止 bind 这样做。

如果您不想要，请不要使用 bind。

只需以传统方式创建新函数即可。

el.addEventListener('click', function () { say(1, 2, 3) });

Vanilla Javascript 使用带有 REST 参数的 bind()

Vanilla Javascript use of bind() with REST parameter

javascript

bind