mouseover,mouseout,mouseenter,mouseleave的区别
1.前言
今天下午参加一个面试，对方问我写不写博客，这时候才猛然意识到好久没写东西了。最近一直在外边实习，每天有很多经历和挑战，但是却没有及时地记录下来，这一点必须得批评自己，以后得经常把自己遇到的问题及时记录下来。
言归正传，今天面试卡住的第一个问题就是问我如何获取mouseenter、mouseleave中的两个对象？对这两个对象我只知道它们的特点是均不冒泡，是DOM新规范定义的方法，至于其他东西就不知道了。
2.二者的区别（以mouseover、mouseenter为例）
<!doctype html>
<html>
<head>
<title>mouseover and mouseenter</title>
<style>
#outer{width: 800px; border: 1px solid #DDD; overflow: hidden; padding: 100px 50px;}
#inner{height: 120px; border:1px solid #DDD; }
</style>
</head>
<body>
<div id="outer">
<p id="inner">aaaaaa</p>
</div>
</body>
</html>
<script>
var outer = document.getElementById('outer');
outer.addEventListener('XXX',function(event){
console.log('target:' + EventUtil.getTarget(event));
console.log('relatedTarget:' + EventUtil.getRelatedTarget(event));
});
var EventUtil = {
getEvent: function(event){
return event || window.event;
},
getTarget: function(event){
return EventUtil.getEvent(event).target || EventUtil.getEvent(event).srcElement;
},
getRelatedTarget: function(event){
return EventUtil.getEvent(event).relatedTarget || EventUtil.getEvent(event).fromElement || EventUtil.getEvent(event).toElement ;
}
}
</script>
当xxx = mouseover时：把鼠标放在outer容器里面来回移动，就会发现控制台不断地输出，说明mouseover是可以冒泡的；
当xxx = mouseenter时：把鼠标放在outer容器里面来回移动，就会发现控制台没有输出，说明mouseenter是不冒泡的；
3.关于上面的EventUtil.getRelatedTarget则是考虑到IE和非IE兼容性。
4.jquery新发现：查看jquery的hover方法，就会发现
jQuery.fn.hover = function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
};
看来jquery早就也意识到mouseover、mouseout冒泡带来的问题了。
