6

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

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，但在最后一种情况下，传递的参数似乎替换了预期的事件对象。

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

4

2 回答 2

8

但在最后一种情况下，传递的参数似乎替换了预期的事件对象。

Usingbind创建一个具有预先指定的初始参数的函数。

MDN 文档：

这些参数（如果有）跟随提供的this值，然后插入到传递给目标函数的参数的开头，然后是在调用绑定函数时传递给绑定函数的参数。

这意味着，如果你这样做：

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

正如您所提到的，的值this是绑定的，但是来自的事件作为第二个参数传递给，而不是第一个，因为您绑定到了第一个参数。所以你仍然得到这个事件，它没有被替换，它只是在所有绑定参数之后传递。h1onclickdoit1

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

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

function doit(one, e) {
  console.log(this, one, e); // on click logs: h1 object, 1, event object
}
于 2016-05-26T01:57:39.637 回答
0

如果您查看此链接，它会说第一个参数之后的参数成为传递给函数的第一个参数。

如果你只用 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();

于 2016-05-26T01:53:25.163 回答