是否可以使用 AddEventListener 为悬停/输入事件添加侦听器？

Question

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

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

就像我可以这样使用它：

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

将单击事件处理程序分配给 myButtonItem...但是没有可以代替 click 的 "hover" 。

Answer 1

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

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

...当鼠标进入 div 时，具有类 myDiv 的 div 将显示绿色背景。

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

您必须选择的事件有：

mouseenter - 当鼠标进入元素时触发。不冒泡，目前 Firefox、Safari 或 Chrome 不支持，虽然它在规范中并且已经存在了一段时间。

mouseleave - 当鼠标离开元素时触发。不冒泡，目前 Firefox、Safari 或 Chrome 不支持，虽然它在规范中并且已经存在了一段时间。

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 文档跨浏览器解决方法。