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

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.在所有情况下,vallue都this被正确设置为h1,但在最后一种情况下,传递的参数似乎替换了预期的事件对象.

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

Answer 1

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

使用bind创建具有预先指定的初始参数的函数.

MDN文件:

这些参数(如果有的话)遵循提供的this值,然后在传递给目标函数的参数的开头插入,然后在调用绑定函数时传递给绑定函数的参数.

这意味着,如果你这样做:

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

正如您所提到的那样,值this被绑定,h1但是由于您绑定到第一个参数,因此将事件onclick作为第二个参数传递给doit而不是第1一个参数.所以你仍然得到这个事件,它没有被替换,它只是在所有绑定的参数之后传递.

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

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

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