悬停时高效的 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功能来缩短它。不幸的是，它还没有奏效。

如何写好这段代码呢？

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 伪类。h1{  /* Style when not hovering */}h1:hover{  /* Style when cursor is on element */}