绑定和事件处理程序——传递事件对象

Question

我有一些绑定事件处理程序的示例代码，如下所示：

var h1=document.querySelector('h1');
h1.onclick=doit;

function doit(x) {
        console.log(x);
}

当事件处理程序被触发时（通过单击 h1 元素），输出是一个 event 对象，正如预期的那样。

如果我按如下方式绑定事件处理程序：

h1.onclick=doit.bind(h1);

我得到了相同的结果。

但是，如果我绑定如下：

h1.onclick=doit.bind(h1,1);

我得到1，h1之后的第一个参数。在所有情况下，this 的值都正确设置为 h1，但在最后一种情况下，传递的参数似乎 替换了 预期的事件对象。

如何在不将事件处理程序重写为函数表达式的情况下保留事件对象？

Answer 1

如果你查看 this link 它说第一个参数之后的参数成为传递给函数的第一个参数。

如果您仅使用 h1 元素调用它，您所做的就是将该函数绑定到该 h1 元素。如果您在第二个参数中传递任何其他内容，它将成为传递给函数的第一个参数。

例子

function testing(a, b, c) {
  console.log(this.property, a, b, c);
}

var obj = {
  property: 'value!'
};

var bound_test = testing.bind(obj, 'Bound Test A');
bound_test('test 1', 'checking console output');
bound_test() // should give two undefined in console since we are only giving the first object.

var bound2_test = testing.bind(obj, 'Bound test B', 'something ');
bound2_test('this will be the "c" argument');

var bound3_test = testing.bind(obj, 'Bound test C', 'Test', ' another, yet different test.');
bound3_test();

Answer 2

but in the last case, the passed parameter appears to replace the expected event object.

使用bind创建一个带有预先指定的初始参数的函数。

MDN Docs:

These arguments (if any) follow the provided this value and are then inserted at the start of the arguments passed to the target function, followed by the arguments passed to the bound function, whenever the bound function is called.

也就是说，如果你这样做：

h1.onclick=doit.bind(h1,1);

如您所述，this 的值绑定到 h1，但是来自 onclick 的事件作为 第二个参数传递 到 doit，而不是第一个，因为您将 1 绑定到第一个参数。所以你仍然收到事件，它没有被替换，它只是在所有绑定参数之后传递。

How can I keep the event object without rewriting the event handler as a function expression?

你不能。该事件将在您之前绑定到该函数的所有参数之后传递，因此您必须考虑到这一点。对于给定的情况，doit 看起来像：

function doit(one, e) {
  console.log(this, one, e); // on click logs: h1 object, 1, event object
}

绑定和事件处理程序——传递事件对象

Binding and event handler — passing the event object

javascript

events

event-listener

function-binding

eventhandler

例子