hover([over,]out) 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。 当鼠标移出这个元素时，会触发指定的第二个函数。 代码如下: $(‘.myDiv’).hover(function() { doSomething… }, function() { doSomething… }); 而问题是有些元素比如菜单是通过AJAX动态加载的，hover方法执行的时候 菜单还没加载出来呢，所以就要用到jquery的另一个方法live() .live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委
在JavaScript的世界里，jQuery库为开发者提供了极大的便利，特别是在处理DOM操作和事件处理方面。本文将深入探讨jQuery的`hover()`方法以及与之配合使用的`live()`方法，这两种方法在处理动态加载元素时如何协同工作。
`hover()`是jQuery提供的一种便捷方式，用于模拟CSS中的`:hover`伪类，它允许我们同时处理`mouseenter`和`mouseleave`两个事件。当鼠标进入匹配元素的区域时，`hover()`的第一个参数函数会被调用；当鼠标离开该元素时，第二个参数函数会被调用。例如：
```javascript
$(‘.myDiv’).hover(function() {
doSomethingOnEnter…
}, function() {
doSomethingOnLeave…
});
```
在这段代码中，`.myDiv`选择器会选取页面上所有类名为`myDiv`的元素，然后为这些元素分别绑定`mouseenter`和`mouseleave`事件的处理函数。
然而，在某些情况下，如页面中存在通过AJAX动态加载的元素（例如下拉菜单），当使用`hover()`方法时可能会遇到问题。因为这些元素在`hover()`方法执行时可能还未存在于DOM中，因此无法绑定事件。这时，`live()`方法就派上用场了。
`live()`方法允许我们为尚未存在于DOM或者将来可能添加到DOM的元素绑定事件。它的原理是事件委托，即将事件处理函数绑定到一个祖先元素，通常是文档的根节点`document`，当事件在后代元素上触发时，祖先元素接收到事件并根据事件的目标元素来执行相应的处理函数。这使得动态加载的元素也能响应事件。
以下是使用`live()`方法处理`hover`事件的例子：
```javascript
$(‘.myDiv’).live('hover', function(event) {
if (event.type == 'mouseenter') {
doSomethingOnEnter…
} else {
doSomethingOnLeave…
}
});
```
需要注意的是，不同的jQuery版本对于`live()`方法支持的事件名称可能存在差异。早期版本可能使用`mouseenter`和`mouseleave`，而某些版本则使用`mouseover`和`mouseout`。不过，自jQuery 1.7版本开始，`live()`方法已被`on()`方法取代，因为`on()`提供了更强大的功能和更好的性能。如果你使用的是较新的jQuery版本，推荐使用`on()`来实现相同的功能，例如：
```javascript
$(document).on('mouseenter mouseleave', '.myDiv', function(event) {
if (event.type == 'mouseenter') {
doSomethingOnEnter…
} else {
doSomethingOnLeave…
}
});
```
`hover()`和`live()`（或`on()`）结合使用，可以确保即使在元素动态加载的情况下，仍然能够正确地捕获和处理`mouseenter`和`mouseleave`事件。这种技术在现代网页开发中非常常见，尤其是在构建交互丰富的、动态更新的用户界面时。了解并熟练掌握这些方法，对于提升用户体验和增强页面交互性至关重要。
