JavaScript addEventListener - 如何使用它创建鼠标悬停效果？

Question

我有一个id为"button"的div。我想在鼠标悬停时将其背景更改为蓝色（不使用CSS的hover选择器）。

var item = document.getElementById("button");
item.addEventListener("mouseover", func, false);

function func()
{  
   var item = document.getElementById("button");
   item.setAttribute("style", "background-color:blue;")
}

然而，这只是在我悬停时将项目颜色设置为蓝色，但在移开鼠标后并未将其重置为白色。我该如何解决这个问题？（顺便说一下，mouseenter和mouseleave似乎无法解决这个问题）。

- antonpug

Answer 1

您需要设置一个类似的事件来处理 mouseout。在 mouseout 事件函数中，您可以将颜色更改回原始颜色。

var item = document.getElementById("button");
item.addEventListener("mouseover", func, false);
item.addEventListener("mouseout", func1, false);

function func()
{  // not needed since item is already global, 
   // I am assuming this is here just because it's sample code?
   // var item = document.getElementById("button"); 
   item.setAttribute("style", "background-color:blue;")
}

function func1()
{  
   item.setAttribute("style", "background-color:green;")
}

- AndrewR

---

啊...太好了！我在我的 div 中有一张图片，但它认为它是“外部”的，有什么方法可以遮盖它，让它仍然认为它在框内？ - antonpug

是的，mouseover和mouseout事件也会捕获来自子元素的所有事件（它们会冒泡）在你的函数中，你需要比较事件参数中的relatedTarget（W3C）或toTarget/fromTarget（IE）属性。请查看此链接以获取更多信息：http://www.quirksmode.org/js/events_mouse.html#relatedtarget - AndrewR

仅捕获父容器而不处理子元素中的任何内容是一项繁重的工作。除非您有特定的原因不这样做，否则您可以通过使用jQuery的hover()函数来简化代码。 - AndrewR

你可以使用this.setAttribute来设置这些属性，而不是在func()和func1()内部使用变量名，这对我来说非常方便。有人能解释一下这是如何发生的吗？也许需要发布一个新帖子。 - James

Answer 2

你尝试过mouseout吗？

（不幸的是，“mouseover”事件的命名不太恰当——如果它被称为“mousein”，那么它将更明显和直观地成为“mouseout”的相反事件。但这只是许多不一致的事件中的一个问题。）

我认为mouseenter和mouseleave是IE的东西，其他浏览器可能不支持——虽然我认为jQuery也支持这些事件。

- nnnnnn

---

mouseout 可以用...但是有没有类似 mousein 的东西？mousein 不起作用。 - antonpug

不，不是“mousein”。这两个事件肯定是“mouseover”和“mouseout”。我的意思是现有的“mouseover”事件应该被称为“mousein”，这样它就更明显地与“mouseout”相对。但事实并非如此。我编辑了我的答案，试图让它更清晰一些。 - nnnnnn

同意，事后看来它的命名可能可以更好。 - Alex Stephens