如何以更干的方式监听3个元素中的mouseover和mouseout事件? [英] How do I listen to mouseover and mouseout events in 3 elements in a more DRY way?

问题描述

我正在通过JS将一些动画应用于导航栏，但在事件侦听部分中我可能会重复很多次.

I'm applying some animations to a navbar through JS but I'm probably repeating myself a lot in the event listening part.

但是我找不到改善它的方法.

But I can't find a way to improve it.

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

Is there a way I can use a loop or something in order to listen to all these events without writing a code block for each one?

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>

推荐答案

执行所寻求的一种方法是将一个类添加到要使其可悬停的所有内容中，并使用 querySelectorAll .这是html的外观:

One way to do what you are seeking is to add a class to everything you want to make hoverable and use querySelectorAll. Here is what the html will look like:

<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将如下所示:

And your JavaScript will look like this:

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 伪类，如下所示:

This works, but the far simpler way is to update your css to use the :hover pseudo class like this:

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

这完全不需要添加JavaScript.

This does what you want without having to add JavaScript at all.

这篇关于如何以更干的方式监听3个元素中的mouseover和mouseout事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！