首先发生什么，CSS或JS事件？

Question

例如，如果你将CSS悬停效果放在一个元素上，并且还在其上放置一个JS mouseenter事件，那么首先会发生哪一个？这有什么不一样的吗？你能以某种方式控制它吗？是否可以强制它们按特定顺序执行？

Answer 1

  

哪一个会先发生？

请注意，没有“CSS事件”这样的事情。但是，行为未定义;您可以考虑将CSS更改和JS事件同时发生。相关规范CSS Selectors 4，DOM 3 Events和HTML 5指出了hover和mouseenter之间的相似之处，但未指定订单。指定了Mouse event order，但没有引用CSS用户操作伪类。

  

与此有任何差异吗？

是的，浏览器可以自由地实现它。他们可以在触发JS事件之前更改布局并重新绘制页面，或者他们不能。但它应该没什么区别。

  

是否可以强制它们按特定顺序执行？

我个人希望在执行JS事件处理程序时已经应用了CSS。即使尚未计算，在查询样式（例如getComputedStyle(this)）时，也会进行CSS重新计算，以便始终获得动态样式 - 另请参阅When does reflow happen in a DOM environment?。

在http://jsfiddle.net/n4Z8H/尝试一下。虽然大多数主流浏览器都会产生预期值（rgb(0, 0, 255)，蓝色:hover样式），但旧的IE似乎没有。

Answer 2

取决于浏览器的工作原理，不应该依赖它。大多数浏览器应该几乎完全同时运行这两个浏览器。如果你想要一个在另一个之前/之后执行，只需通过JavaScript控制CSS样式，例如在悬停时添加一个类，而不是悬停删除该类。

虽然，如果这是一个实际问题，你可能做错了。