mouseenter和mouseleave事件演示

注：除 IE 系列支持 mouseenter 和 mouseleave 事件外，opera11+ 、firefox10+也支持 mouseenter 和 mouseleave 事件，同时它们也成为 w3c DOM3 Event 的规范，其他浏览器(chrome、opera)不支持。

jQuery 对这两个事件做了兼容，效果可参见页面最下方的测试效果。

HTML 事件处理程序

mouseenter 和 mouseleave

<div class="case" onmouseenter="mouseenter(this)" onmouseleave="mouseleave(this)">
  <div>mouseenter 和 mouseleave</div>
</div>

mouseover 和 mouseout

<div class="case" onmouseover="mouseover(this)" onmouseout="mouseout(this)">
  <div>mouseover 和 mouseout</div>
</div>

DOM0级事件处理程序

mouseenter 和 mouseleave

var me_1 = document.getElementById('me_1');
me_1.onmouseenter = function(e){
  mouseenter(this);
}
me_1.onmouseleave = function(e){
  mouseleave(this);
}

mouseover 和 mouseout

var mo_1 = document.getElementById('mo_1');
mo_1.onmouseover = function(e){
  mouseover(this);
}
mo_1.onmouseout = function(e){
  mouseout(this);
}

DOM2级事件处理程序

mouseenter 和 mouseleave

var me_2 = document.getElementById('me_2');
addDomListener(me_2, 'mouseenter', function(e){
  var _self = this;
  if(_self === window){
    _self = me_2;
  }
  mouseenter(_self);
});
addDomListener(me_2, 'mouseleave', function(e){
  var _self = this;
  if(_self === window){
    _self = me_2
  }
  mouseleave(_self);
});

mouseover 和 mouseout

var mo_2 = document.getElementById('mo_2');
addDomListener(mo_2, 'mouseover', function(e){
  var _self = this;
  if(_self === window){
    _self = mo_2
  }
  mouseover(_self);
});
addDomListener(mo_2, 'mouseout', function(e){
  var _self = this;
  if(_self === window){
    _self = mo_2
  }
  mouseout(_self);
});

jQuery的hover，mouseenter，mouseleave事件

mouseenter 和 mouseleave

$('#me_3').mouseenter(function(e){
  mouseenter(this);
}).mouseleave(function(){
  mouseleave(this);
});

mouseover 和 mouseout

$('#mo_3').mouseover(function(e){
  mouseover(this);
}).mouseout(function(){
  mouseout(this);
});

返回相关文章