                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

关于hover事件的问题

官方不是把hover事件hover,out事件功能取消了么，为啥这里还用这个功能，详情请看http://www.css88.com/jqapi-1.9/hover/

十nian

2015-03-09

源自：jQuery基础课程 6-3

关注问题我要回答

909

操作

收起

2 回答

Issa_Tan
2015-04-09

就jQuery 官方的文档而言，并没有说remove hover() 这个事件，只是说明它不再是"mouseenter"和"mouseleave" 的代名词。(见http://jquery.com/upgrade-guide/1.9/#quot-hover-quot-pseudo-event)

Demo1: $(XX).hover(function(){})

tip:切换 <head> 元素里的注释查看不同版的jQuery 下的效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQurey 1.9 - hover</title>
 <!-- <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js" type="text/javascript"></script> -->
<script src="http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
</head> 
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Chips</li>
<li>Socks</li>
</ul>
<script>
$(function() {
$("li").hover(
function (evt) {
console.log(evt.type);
$(this).append($("<span> ***</span>"));
},
function (evt) {
console.log(evt.type);
$(this).find("span:last").remove();
}
);
$("li.fade").hover(function(){
console.log("fadeOut");
$(this).fadeOut(100);
console.log("fadeIn");
$(this).fadeIn(500);
});
});
</script>
</body>
</html>

Demo2： 1.8的delegate$(xx).delegate()方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQurey 1.9 - hover</title>
<script src="http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
</head> 
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Chips</li>
<li>Socks</li>
</ul>
<script>
$(function() {
var onHover = function(evt){
console.log(evt.type);
if(evt.type == "mouseenter"){
$(this).append($("<span> ***</span>"));
}else{
$(this).find("span:last").remove();
}
};
$('ul').delegate('li','hover', onHover)
});
</script>
</body>
</html>

Demo3： 1.9.1的delegate$(xx).delegate()方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQurey 1.9 - hover</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js" type="text/javascript"></script>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
</head> 
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Chips</li>
<li>Socks</li>
</ul>
<script>
$(function() {
var onHover = function(evt){
console.log(evt.type);
if(evt.type == "mouseenter"){
$(this).append($("<span> ***</span>"));
}else{
$(this).find("span:last").remove();
}
};
$('ul').delegate('li','hover', onHover)
});
</script>
</body>
</html>

可见 - 在1.9版使用 .hover() 事件没不会出错或没有响应，而如果你希望使用 on,delegeta 则是不可能的。

我追溯了一下源码，使用的分别是1.11.2 和 1.8 版

就.hover() 事件而言，源码一致，这也可以解释了在你直接使用 .hover() 事件时，两个版本并不会出现不同。

那到底为什么在1.9 版及以上使用 delegate,on 等绑定方法不行呢？问题就在于你提出来的，官方对 "hover" 这个String ，做了修改。

link"hover" pseudo-event
As of 1.9, the event name string "hover" is no longer supported as a synonym for "mouseenter mouseleave". This allows applications to attach and trigger a custom "hover" event. Changing existing code is a simple find/replace, and the "hover" pseudo-event is also supported in the jQuery Migrate plugin to simplify migration.

再次回到源码，发现在1.9以下版本中，其实是jQuery 官方给出了一个Hack。（具体这个Hack 在 add event 中如何使用，请查看1.9版以下的源码）。在1.9+版本中官方删除了这个Hack。