HTML DOM 事件答案

【问题标题】：HTML DOM eventsHTML DOM 事件
【发布时间】：2012-09-17 21:17:41
【问题描述】：

我有一个如下的浏览器树。每个节点都是一个具有单独 id 的 div 元素。当鼠标悬停在节点上时，我想更改样式。并在用户左键单击或右键单击节点时执行某些操作。

问题 1：一些文档说 :hover 选择器存在性能问题。所以我改为监听 mouseover 和 mouseout 事件。推荐这种方式吗？

为了实现我的要求，我想监听每个节点的 mouseover、mouseout、click 和 contextmenu 事件。我有两个解决方案。第一个是将事件处理程序绑定到每个节点。第二个是仅将事件处理程序绑定到根节点。当事件冒泡到根节点时，将调用处理程序。

问题 2：两种解决方案哪个性能更好？

【问题讨论】：

为什么要用JS设置悬停效果？这不是 CSS 的任务吗，它没有任何性能问题（至少在不使用多个转换的情况下不会）。
建议“避免为 IE 客户端的非链接元素使用 :hover 伪选择器”。从此处复制 (developers.google.com/speed/docs/best-practices/rendering)。

【解决方案1】：

CSS 在悬停方面的性能通常优于 JavaScript，它更原生，并且更容易维护（性能不仅限于客户端技术，维护代码的人的性能如何？）。

有时需要在 JavaScript 中模拟悬停效果以支持旧版浏览器，具体取决于所使用的 HTML（如果您在链接上使用 :hover 总是可以的）。

事件冒泡将比多个事件处理程序实例执行得更好。 http://icant.co.uk/sandbox/eventdelegation/

您不应该使用悬停来展开/折叠新内容，但是，这是无法访问的，展开/折叠应始终由链接元素上的点击事件触发（顺便说一下，这听起来不像您）。

【讨论】：

建议“避免为 IE 客户端的非链接元素使用 :hover 伪选择器”。从此处复制 (developers.google.com/speed/docs/best-practices/rendering)。引号：[避免 :hover 用于 IE 客户端的非链接元素的伪选择器。如果您在非锚元素上使用 :hover，请在 IE7 和 IE8 中测试页面以确保您的页面可用。如果您发现 :hover 导致性能问题，请考虑有条件地为 IE 客户端使用 JavaScript onmouseover 事件处理程序。 ]
我知道，但出于可访问性（键盘/触摸屏）的原因，我总是使用可悬停项目的链接。只有当您的 CSS 选择器过于模糊时，才会出现性能问题。
谢谢李。 :hover 问题是否只存在于 IE 中？ Chrome、Safari 和 Firefox 呢？你碰巧知道吗？
它在其他主要浏览器中很长一段时间都是可靠的，如果不是自创建以来。