mouseover,mouseout,mouseenter,mouseleave的区别

时间:2023-07-31 08:40:55

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