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冒泡带来的问题了。

  

你可能感兴趣的:(mouseover)