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