addEventListener回调中event参数如何通过bind()传递？代码疑问解析

你的猜测是对的，但这不是“约定”，而是JavaScript语言规范和DOM事件API共同定义的标准行为，具体拆解如下：

1. bind()的参数规则
   Function.prototype.bind()的核心作用是创建一个绑定了指定this指向的新函数，同时可以给原函数预先传入前置参数：

• 第一个参数是要绑定的this值；
• 从第二个参数开始，是要预先传递给原函数的参数，这些参数会排在原函数参数列表的最前面。

2. 事件回调的参数规则
   通过addEventListener绑定事件时，浏览器触发事件的瞬间，会自动把事件对象（Event）作为参数传递给回调函数。如果回调是bind()生成的绑定函数，这个事件对象会被追加到bind()预先传入的参数之后，再一起传给原函数。

结合你的代码来看：

• handleHover.bind(0.5)生成了一个新函数，它把原函数的this绑定为0.5（你的代码里没用到this，所以这个绑定暂时没实际作用），没有预先传入其他参数；
• 当mouseover事件触发时，浏览器会把MouseEvent对象作为参数传给这个绑定函数；
• 绑定函数直接把这个事件对象传递给原函数handleHover，也就是handleHover的e参数就接收到了事件对象。

举个更直观的例子验证：

const handleHover = function (preArg, e) {
  console.log('bind预先传入的参数:', preArg); // 输出0.5
  console.log('事件对象:', e); // 输出MouseEvent实例
};
nav.addEventListener('mouseover', handleHover.bind(null, 0.5));

这里bind(null, 0.5)把0.5作为前置参数传入，事件触发时浏览器追加的事件对象会成为第二个参数，原函数就能同时拿到两个值。

总结：bind()生成的函数会先传递预先设定的参数，再追加调用时（这里是事件触发时）传入的参数，这是bind()的标准行为；而事件回调自动传入事件对象，两者结合就出现了你看到的效果。

内容的提问来源于stack exchange，提问作者ZiSenWang