是否可以使用 AddEventListener 为悬停/输入事件添加侦听器？ [关闭]答案

【问题标题】：Is it possible to use AddEventListener to add a listener for the hover/enter event? [closed]是否可以使用 AddEventListener 为悬停/输入事件添加侦听器？ [关闭]
【发布时间】：2012-01-09 04:11:36
【问题描述】：

我正在尝试添加一个事件侦听器来响应悬停在 div 上并更改其颜色。

我必须使用addEventListener ...这是一个作业。不过我不确定这怎么可能？

就像我可以这样使用它：

myButtonItem.addEventListener("click",myrespondfunction,false)

为 myButtonItem 分配一个点击事件处理程序...但是没有 "hover" 可以代替 click。

【问题讨论】：

如果您希望得到答案，您将不得不在此处添加更多详细信息。
设置了哪些人为约束，导致您无法使用正确的解决方案？ 为什么你改变了你的问题？
投票以“不是一个真正的问题”结束，因为“很难说出这里要问什么。”
各位，问题是作业，所以OP是学生。不要因为他不是专家而抨击他。这个问题的措辞很糟糕，因为提问的人不知道术语，而不是因为他是个混蛋，你们都应该巨魔。放轻松？
antonpug：“我说我们将把这个问题委托给 Stackoverflow 支持” 当然，为什么不呢。该网站有标准。阅读常见问题解答。如果您将鼠标悬停在向下箭头上，您会看到一个解释，证明您收到的选票是合理的。提出好的和适当的问题是您的责任。我们可以使用网站的工具对这些问题进行评分。我显然比 @Chris 更有信心，相信你有能力做得比这更好。

标签： javascript html dom javascript-events

【解决方案1】：

有几种方法可以实现悬停效果。最好的方法是使用 CSS 选择器：

.myDiv {
    background-color: red;
}
.myDiv:hover {
    background-color: green;
}

...myDiv 类的 div 会在鼠标进入 div 时显示绿色背景。

第二种方法是使用 javascript，尽管考虑到 :hover 伪选择器可用并得到广泛支持，这对于简单地更改背景颜色来说是一种极端的过度杀伤力。

您必须选择的事件是：

mouseenter - 当鼠标进入一个元素时触发。不冒泡，目前 Firefox、Safari 或 Chrome 不支持，though it is in the spec and has been for some time。

mouseleave - 当鼠标离开一个元素时触发。不冒泡，目前 Firefox、Safari 或 Chrome 不支持，though it is in the spec and has been for some time。

mouseover - 当鼠标进入一个元素时触发，冒泡到父元素

mouseout - 当鼠标离开元素时触发，冒泡到父元素

查看http://www.quirksmode.org/js/events_mouse.html，了解与这些事件相关的特定怪癖的更多信息。由于与多个事件处理程序相关的权重（这就是为什么不建议使用 javascript 来处理 CSS 可以处理的事情......您正在为页面添加不必要的权重），您可能需要考虑使用事件委托来处理这些事件。请参阅 http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/ 了解入门级文章，解释概念并检查一些优缺点。例如，如果计划将此添加到页面上的所有 a 标记中，我会毫无疑问地使用委托。

就实际添加事件而言，addEventListener 不是跨浏览器。有关该问题的信息，请参阅文章 http://www.quirksmode.org/js/events_advanced.html，以及讨论不同并提供跨浏览器解决方法的 MDN documentation。

【讨论】：