2015-06-02 js中的关于的移入移出触发事件的顺序

html   （结构很重要，包裹）
<div class="a">
    	<div class="b"></div>
 </div>
css
.a{ 200px;height: 200px;border: 1px solid #000;position: absolute;}
.b{ 100px;height: 100px;border: 1px solid #000;position: absolute;}

js
//这里是mouseover & mouseout
$('.a').on('mouseover',function () {
	alert('a in');
}).on('mouseout',function () {
	alert('a out');
})
$('.b').on('mouseover',function () {
	alert('b in');
}).on('mouseout',function () {
	alert('b out');
})
//移入a          a in
//从a到b         a out----b in-----a in
//从b到外        b out-----a out-----a in
//从b到a         b out----a out----a in


//这里是mouseenter & mouseleave ps:jq的hover代表mouseenter和mouseleave
$('.a').on('mouseenter',function () {
	alert('a in');
}).on('mouseleave',function () {
	alert('a out');
})
$('.b').on('mouseenter',function () {
	alert('b in');
}).on('mouseleave',function () {
	alert('b out'); 
})
//移入a          a in
//从a到b         b in
//从b到a         b out
//移出a          a out