如何在addEventListener中同时绑定两个事件并调用同一函数？

你写的element.addEventListener("mouseenter" or "mouseleave", myfunc);这种写法不生效，因为JavaScript里的逻辑或运算（正确写法是||）会直接返回第一个真值，"mouseenter" || "mouseleave"的结果就是"mouseenter"，相当于只给mouseenter事件绑定了函数，mouseleave不会被触发。

正确的实现方式有两种：

• 直接分别调用addEventListener绑定两个事件：

  element.addEventListener("mouseenter", myfunc);
  element.addEventListener("mouseleave", myfunc);
  

• 用数组循环批量绑定，适合后续需要扩展事件的场景：

  const hoverEvents = ["mouseenter", "mouseleave"];
  hoverEvents.forEach(eventName => {
    element.addEventListener(eventName, myfunc);
  });
  

如果需要在myfunc里区分是哪个事件触发的，可以通过事件对象的type属性判断：

function myfunc(event) {
  if (event.type === "mouseenter") {
    // 处理鼠标进入逻辑
  } else if (event.type === "mouseleave") {
    // 处理鼠标离开逻辑
  }
}

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