javascript - 悬停时高效的 JS 事件监听器

Question

我已经编写了以下脚本，它运行良好。

function LogoHoverAdd() {
    this.classList.add("logo__container--hover");
}
function LogoHoverRemove() {
    this.classList.remove("logo__container--hover");
}

var logo = document.querySelector("h1");
logo.addEventListener("mouseover", LogoHoverAdd);
logo.addEventListener("mouseout", LogoHoverRemove);

我认为，这种方法效率很低，因为我必须实现其中一些事件监听器。因此，我试图通过将它放在一起或使用 ClassList Toggle 函数来缩短它。不幸的是，它还没有奏效。

如何写好这段代码？

[[我没有使用 jquery。]]

Answer 1

很明显这是一个 Javascript 问题，这里是您可以创建可重用函数的方法。

function hover(element, enter, leave){
  element.addEventListener('mouseenter', enter)
  element.addEventListener('mouseleave', leave)
}

然后您可以像这样传递您的元素和回调函数。

hover(document.querySelector('h1'), e => {
  // On hover
  e.target.classList.add("logo__container--hover")
}, e => {
  // On exit hover
  e.target.classList.remove("logo__container--hover")
})

您也可以通过修改悬停功能来减少代码行数。

function hover(element, className){
  element.addEventListener('mouseenter', e => element.classList.add(className))
  element.addEventListener('mouseleave', e => element.classList.remove(className))
}

然后像这样使用它。

hover(document.querySelector('h1'), "logo__container--hover")

您现在可以将其重复用于多个元素。

---

这是我之前的回答:正如 JHeth 提到的，使用 CSS pseudo-classes相反。

h1{
  /* Style when not hovering */
}

h1:hover{
  /* Style when cursor is on element */
}