悬停时的高效 JS 事件监听器答案

【问题标题】：Efficient JS Event Listener on Hover悬停时的高效 JS 事件监听器
【发布时间】：2020-09-15 03:36:21
【问题描述】：

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

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。]]

【问题讨论】：

你能分享一下 HTML 吗？听起来你根本不需要 JS，CSS 有一个内置的悬停检测 h1:hover 如果你真正想做的只是在悬停时添加一些样式，那么你只需要。
我看不出您当前的代码有什么特别的问题。我唯一要改变的是使用mouseenter 事件而不是mouseover
好的，我试试mouseenter。顺便说一句，我已经缩短了代码，所以我必须在同一个函数中执行一些其他任务。
我的目标是使用“ToggleClass(classname)”函数来最小化代码行。但我不明白....
你的目标是围绕这两个事件监听器编写漂亮的 Javascript 吗？

标签： javascript html css class

【解决方案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 */
}

【讨论】：

非常感谢迈克！这是完美的解决方案！
没问题，迈克尔！