如何以更 DRY 的方式监听 3 个元素中的 mouseover 和 mouseout 事件？

Question

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

但是我找不到改进的方法。

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

let headerHome = document.querySelector('.headerHome');
let headerPlayground = document.querySelector('.headerPlayground');
let headerAbout = document.querySelector('.headerAbout');

headerHome.addEventListener('mouseover', () => {
    headerHome.classList.add('mouseOverHeader');
})

headerHome.addEventListener('mouseout', () => {
    headerHome.classList.remove('mouseOverHeader');
})

headerPlayground.addEventListener('mouseover', () => {
    headerPlayground.classList.add('mouseOverHeader');
})

headerPlayground.addEventListener('mouseout', () => {
    headerPlayground.classList.remove('mouseOverHeader');
})

headerAbout.addEventListener('mouseover', () => {
    headerAbout.classList.add('mouseOverHeader');
})

headerAbout.addEventListener('mouseout', () => {
    headerAbout.classList.remove('mouseOverHeader');
})

.header-menu{
    display: flex;
    justify-content: flex-start;
    list-style-type: none;
    flex-direction: column;
    margin: 1em 0 0 2em;
}

.header-menu div{
    margin-right: 2em;
    transition: transform 1s;
    transition: padding-right 1s;
    transform-origin: left;
}

.header-menu a{
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.mouseOverHeader{
    transform: scale(1.1);
    padding-right: 4em;
}

<nav class="header-menu">
      <div class="headerHome"><a href="/index.html">Home</a></div>
      <div class="headerPlayground"><a href="/playground.html">Playground</a></div>
      <div class="headerAbout"><a href="/about.html">About</a></div>
    </nav>

Answer 1

你可以为它写一个class:

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');

Answer 2

一种方法可以实现您想要的效果，即在您想要悬停的所有内容上添加 class，然后使用 querySelectorAll。这是 html 的样子：

<nav class="header-menu">
  <div class="hoverable headerHome"><a href="/index.html">Home</a></div>
  <div class="hoverable headerPlayground"><a href="/playground.html">Playground</a></div>
  <div class="hoverable headerAbout"><a href="/about.html">About</a></div>
</nav>

您的 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 伪 class，如下所示：

.header-menu a:hover {
    transform: scale(1.1);
    padding-right: 4em;
}

这完全不需要添加 JavaScript 就可以满足您的需求。

如何以更 DRY 的方式监听 3 个元素中的 mouseover 和 mouseout 事件？

How do I listen to mouseover and mouseout events in 3 elements in a more DRY way?

javascript

css

dry

dom-events