请教：forEach中两种mouseenter事件监听器绑定方式的差异

直接说关键点：

• 函数内部的this指向完全不同
  当你直接传onEnter给事件监听时，事件触发后，onEnter内部的this会自动指向触发该事件的DOM元素（也就是当前鼠标hover的那个.list节点）。
  而用onEnter.bind(this)时，你强制把onEnter内部的this绑定成了当前代码所在作用域的this——比如这段代码如果在类的方法里，this就是类的实例；如果在全局环境，就是window对象，和触发事件的DOM元素没有关系。

• 绑定的函数引用不一样
  bind()方法每次调用都会返回一个全新的函数副本，所以第一个forEach循环里，每个.list元素绑定的都是独立的函数实例。这就导致之后如果要移除这个事件监听，你没法直接用原函数onEnter来移除，必须提前保存每个bind()返回的函数引用才行。
  第二个forEach循环里，所有元素绑定的都是同一个onEnter函数，后续移除监听时直接调用el.removeEventListener('mouseenter', onEnter)就能生效。

举个直观的例子，假设你的onEnter函数是这样：

function onEnter() {
  console.log(this);
}

• 用bind(this)的绑定方式，每次hover节点都会打印你绑定的外部this（比如类实例或window）；
• 直接传onEnter的方式，会打印当前hover的.listDOM节点。

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