jQueryy原生js实现---hover事件

jQuery常用鼠标事件之一，hover事件。相信大家对它很熟悉，对其原理也很熟悉。通常就是鼠标经过，鼠标离开事件的集合。我为了更好理解jQuery插件库，所以找一些常用方法用js实现，增强对js的理解。

根据上面分析，核心事件就是onmouseover和onmouseout。那么我们就看一下初步效果吧！

<div class="hover1">
        <div class="hover2">3</div>
        <div class="hover2">4</div>
    </div>
    <div class="odiv">1</div>
    <div class="odiv">2</div>

//jQuery原生js实现----hover事件


function hover(ele,over,out){
    ele.addEventListener('mouseover',over,false);
    ele.addEventListener('mouseout',out,false);
}

hover(document.querySelector('.hover1'),function(){
    alert('over');
},function(){
    ale

使用addEventListener绑定mouseover和mouseout事件，只要浏览器支持addEventListener事件，就可以支持该事件，所以hover算是得到简单的实现。

但是有一种常见情况需要特别处理，那就是绝对定位时候，他会将嵌套包含的子级元素识别为其它元素out，然后再冒泡上到父级over，就连续触发两次事件。为了更好模拟jQuery事件，所以我们要再鼠标进入到子级时候不触发事件。

错误体验例子

<div id="dd" style="width:100px; height:100px; overflow:hidden; border:1px solid #3d3d3d; position:relative;">
    <div id="dd2" style="width:50px; height:50px; overflow:hidden; background-color:#cccccc; position:absolute; left:30px; top:30px;"></div>
</div>

//jQuery原生js实现----hover事件


function hover(ele,over,out){
    ele.addEventListener('mouseover',over,false);
    ele.addEventListener('mouseout',out,false);
}
// document.getElementById("dd").onmouseover=function(){alert("进来了");}; 
// document.getElementById("dd").onmouseout=function(){alert("出来了");};
hover(document.querySelector('#dd'),function(){
    console.log('over');
},function(){
    console.log('out');
});

上面就会出现体验不佳效果，同时很多时候我们并不需要该效果。怎么办呢？我们要对数表是否悬浮再父级元素以及延迟子级mouseout事件触发即可达到要求，下面代码来自参考链接博客

function bind(elem,ev,callback)
{
 if(document.all)
 {
  elem.attachEvent("on"+ev,callback);
 }else{
  elem.addEventListener(ev,callback,false);
 }
}
function unbind(elem,ev,callback)
{
 if(typeof(callback)=="function")
 {
  if(document.all)
  {
   elem.detachEvent("on"+ev,callback); 
  }else{
   elem.removeEventListener(ev,callback,false);
  }
 }else{
  if(document.all)
  {
   elem.detachEvent("on"+ev); 
  }else{
   elem.removeEventListener(ev,false);
  }
 }
}
function hover(elem,overCallback,outCallback){//实现hover事件
 var isHover=false;//判断是否悬浮在上方
 var preOvTime=new Date().getTime();//上次悬浮时间
 function over(e){
  var curOvTime=new Date().getTime();
  isHover=true;//处于over状态
  if(curOvTime-preOvTime>10)
  {//时间间隔超过10毫秒，认为鼠标完成了mouseout事件
   overCallback(e,elem);
  }
  preOvTime=curOvTime;
 }
 function out(e)
 {
  var curOvTime=new Date().getTime();
  preOvTime=curOvTime;
  isHover=false;
  setTimeout(function(){
   if(!isHover)
   {
    outCallback(e,elem);
   }
  },10);
 }
 bind(elem,"mouseover",over);
 bind(elem,"mouseout",out);
};

通过判断鼠标是否停留父级元素时间，然后回掉over事件，所以移动到子级元素并不会触发out事件，从而达到hover模拟效果。

参考网址：http://www.cnblogs.com/qiuwenjuan/p/3411749.html