Javascript 如何以更干爽的方式在3个元素中收听mouseover和mouseout事件？

我通过JS将一些动画应用到导航栏，但我可能在事件监听部分重复了很多

但我找不到改进的方法

有没有一种方法可以使用循环或其他方式来侦听所有这些事件，而不必为每个事件编写代码块

让headerHome=document.querySelector'.headerHome'； 让headerPlayground=document.querySelector'.headerPlayground'； 让headerAbout=document.querySelector'.headerAbout'； headerHome.addEventListener'mouseover'，=>{ headerHome.classList.add'mouseOverHeader'； } headerHome.addEventListener'mouseout'，=>{ headerHome.classList.RemouseOverheader'； } headerPlayground.addEventListener'mouseover'，=>{ headerPlayground.classList.add'mouseOverHeader'； } headerPlayground.addEventListener'mouseout'，=>{ headerPlayground.classList.RemouseOverHeader； } headerAbout.addEventListener'mouseover'，=>{ 类列表。添加'mouseOverHeader'； } headerAbout.addEventListener'mouseout'，=>{ 类列表。删除“mouseOverHeader”； } .标题菜单{ 显示器：flex； 调整内容：灵活启动； 列表样式类型：无； 弯曲方向：立柱； 边距：1米0.2米； } .标题菜单div{ 右边距：2米； 转变：转变1s； 过渡：填充右1s； 变换原点：左； } .标题菜单a{ 文字装饰：无； 颜色：继承； 显示：内联块； } .mouseOverHeader{ 转换：scale1.1； 右侧填充：4em； }

---

您可以为它编写一个类：

class MouseOverHeader {
    constructor(selector) {
        this.node = document.querySelector(selector);
        if (!(this.node instanceof HTMLElement)) {
            console.error('failed to find element');
            return;
        }
        this.addEventListeners();
    }

    addEventListeners() {
        this.node.addEventListener('mouseover', () => this.onMouseOver());
        this.node.addEventListener('mouseout', () => this.onMouseOut());
    }

    onMouseOver() {
        this.node.classList.add('mouseOverHeader');
    }

    onMouseOut() {
        this.node.classList.remove('mouseOverHeader');
    }
}

new MouseOverHeader('.headerHome');
new MouseOverHeader('.headerPlayground');
new MouseOverHeader('.headerAbout');

---

您可以为它编写一个类：

class MouseOverHeader {
    constructor(selector) {
        this.node = document.querySelector(selector);
        if (!(this.node instanceof HTMLElement)) {
            console.error('failed to find element');
            return;
        }
        this.addEventListeners();
    }

    addEventListeners() {
        this.node.addEventListener('mouseover', () => this.onMouseOver());
        this.node.addEventListener('mouseout', () => this.onMouseOut());
    }

    onMouseOver() {
        this.node.classList.add('mouseOverHeader');
    }

    onMouseOut() {
        this.node.classList.remove('mouseOverHeader');
    }
}

new MouseOverHeader('.headerHome');
new MouseOverHeader('.headerPlayground');
new MouseOverHeader('.headerAbout');

---

一种方法是将类添加到要使其可悬浮的所有内容中，并使用querySelectorAll。以下是html的外观：

您的JavaScript将如下所示：

let hoverable = document.querySelectorAll('.hoverable');
hoverable.forEach((hoverableElement) => {
  hoverableElement.addEventListener('mouseover', (event) => {
    hoverableElement.classList.add('mouseOverHeader');
  });
  hoverableElement.addEventListener('mouseout', (event) => {
    hoverableElement.classList.remove('mouseOverHeader');
  });
});

保持CSS不变

这是可行的，但更简单的方法是更新css以使用：hover伪类，如下所示：

let hoverable = document.querySelectorAll('.hoverable');
hoverable.forEach((hoverableElement) => {
  hoverableElement.addEventListener('mouseover', (event) => {
    hoverableElement.classList.add('mouseOverHeader');
  });
  hoverableElement.addEventListener('mouseout', (event) => {
    hoverableElement.classList.remove('mouseOverHeader');
  });
});

.标题菜单a：悬停{ 转换：scale1.1； 右侧填充：4em； }

---

这可以实现您想要的功能，而无需添加JavaScript。

实现您想要的功能的一种方法是向所有要使其可悬浮的对象添加一个类，并使用querySelectorAll。以下是html的外观：

您的JavaScript将如下所示：

let hoverable = document.querySelectorAll('.hoverable');
hoverable.forEach((hoverableElement) => {
  hoverableElement.addEventListener('mouseover', (event) => {
    hoverableElement.classList.add('mouseOverHeader');
  });
  hoverableElement.addEventListener('mouseout', (event) => {
    hoverableElement.classList.remove('mouseOverHeader');
  });
});

保持CSS不变

这是可行的，但更简单的方法是更新css以使用：hover伪类，如下所示：

let hoverable = document.querySelectorAll('.hoverable');
hoverable.forEach((hoverableElement) => {
  hoverableElement.addEventListener('mouseover', (event) => {
    hoverableElement.classList.add('mouseOverHeader');
  });
  hoverableElement.addEventListener('mouseout', (event) => {
    hoverableElement.classList.remove('mouseOverHeader');
  });
});

.标题菜单a：悬停{ 转换：scale1.1； 右侧填充：4em； }

---

这可以实现您想要的功能，而无需添加JavaScript。

您不想使用的具体原因是：在CSS中悬停吗？在@nepiw的回答中，他们展示了如何做到这一点。当鼠标悬停被触发时，我想做一些额外的事情，比如在导航栏项目旁边显示一幅图像。你不想使用鼠标悬停的具体原因是什么？在@nepiw的回答中，他们展示了如何做到这一点。当鼠标悬停被触发时，我想做一些额外的事情，比如在导航栏项目旁边显示一个图像。使用CSS鼠标悬停应该是解决方案，除非其他东西真的需要JavaScript。抢手货谢谢。JavaScript是因为我想在悬停时做一些其他事情，比如在导航栏项目旁边显示一个图像。我假设您已经简化了问题，使其成为一个可消费的问题，但您必须指出CSS解决方案以防万一。好问题。使用CSS悬停应该是解决方案，除非其他东西确实需要JavaScript。抢手货谢谢。JavaScript是因为我想在悬停时做一些其他事情，比如在导航栏项目旁边显示一个图像。我假设您已经简化了问题，使其成为一个可消费的问题，但您必须指出CSS解决方案以防万一。好问题。