Javascript和jquery事件-鼠標移入移出事件

javascript使用mouseover和mouseout，只在css中支持hover

jquery支持mouseover和mouseout，封裝了mouseenter、mouseleave事件函數和hover函數

1、有關js中的mouseover和mouseout

原生js的事件類型是mouserout和mouseover，之前提到的事件冒泡的缺陷就在這里，之前說的使用阻止冒泡就行，大概說得太輕易。來理一理它們的觸發順序吧。

<div id=”f1”>

         <div id=”c1”></div>

</div>

 

如上dom結構，鼠標從body移入f1,再移入c1，然后移出c1、f1回到body，如果不做阻止冒泡處理一共觸發了以下有關f1和c1事件：

　　<1>起源於f1的 mouseover事件

　　<2>起源自f1的mouseout事件

　　<3>起源自c1的mouseover事件，這個事件會冒泡，觸發f1的mouseover事件

　　<4>起源自c1的mouseout事件，這個事件會冒泡，觸發f1的mouseout事件

　　<5>起源自f1的mouseover事件

　　<6>起源自f1的mouseout事件

 

　　可以看出，一是父元素鼠標移到子元素也會觸發移入移出效果，二子元素移入移出的時候也會冒泡觸發父元素監聽器。

　　如果給f1設置了監聽器，我們就會觸發6次監聽器。

　　但是，我們一般要用的效果是鼠標從body移入f1觸發監聽器—在f1里面移動（不要觸發監聽器）--鼠標從f1移出到body觸發一次監聽器（即常見的hover效果，上文六個事件只想觸發第一個和最后一個）。這個效果在jq里面封裝在mouseenter、mouseleave事件和hover()函數中。如果想要自己寫的話可以使用阻止冒泡（很麻煩，需要關注到所有元素），或者自己在監聽器中善用target(觸發事件的元素)，currentTarget(綁定監聽器的元素)，toElement和fromElement來判斷。

　　<1>當target！=curentTarget，可以過濾子元素觸發的事件

　　<2>移出事件，當toElement是父元素，可以判斷是真正的移出

　　<3>移入事件，當fromElement是父元素，可以判斷是真正的移入

2、原生js實現hover效果

這只是其中一種方法，相關的分析上面已經說清楚了，因為我用的是谷歌和火狐，只做了兼容谷歌和火狐的版本，如果你的瀏覽器不支持，使用console,log(e)查看事件屬性自己修改，或者換個方法，或者使用jquery封裝好的函數都可。

方法一：這個bug比較多，下面方法二是改版

                       //********自定義的hover事件，兼容谷歌火狐
            function hoverit(e){
                var e = e||window.event||event;
                var target = e.target||e.srcElement;
                var curr = e.currentTarget||originalTarget;
                if(target!=curr) return;//過濾子元素引起的事件
                var relaElementto = e.toElement||e.relatedTarget;
                var relaElementfr = e.fromElement||e.relatedTarget;
                if(relaElementto==target.parentNode&&e.type=="mouseout"){//移出事件
                    console.log(e.target.getAttribute('id'));
                    //定義移出引發的事件
                    console.log('hover out');
                }
                else if(relaElementfr==target.parentNode&&e.type=="mouseover"){//移入事件
                    console.log(e.target.getAttribute('id'));
                    //定義移入引發事件
                    console.log('hover in');
                }
                
            }
            //********js的mouseover和mouseout
            document.getElementById('f1').onmouseover=hoverit;
            document.getElementById('f1').onmouseout=hoverit;        

方法二：

//******用法：將該元素同時綁定在mouseover和mouseout事件上，並在注釋位置定義自己的事件
var showPicCommand = function(e){
        var e = e||window.event||event;
        var curr = e.currentTarget||originalTarget;//定義了hover事件的元素
        var relaElementto = e.toElement||e.relatedTarget;//移出事件的目標
        var relaElementfr = e.fromElement||e.relatedTarget;//移入事件的目標
        if(!curr.contains(relaElementto)&&e.type=="mouseout"){//移出事件，即，當移出的目標不是它的子元素中的任一個，我們就確定它的確是移出了
            //定義移出引發的事件
            console.log('hover out');
        }
        else if(!curr.contains(relaElementfr)&&e.type=="mouseover"){//移入事件，即，當移入的目標不是它的子元素中的任一個，我們就確定它的確是移入了
            //定義移入引發事件
            console.log('hover in');
         }
    }

 

 

3、jquery事件

jquery支持mouseover和mouseout,效果和js的一樣

//*********jquery也可以使用mouseover和mouseout
$('#f2').on('mouseover',showit);
$('#f2').on('mouseout',showit);

jquery自定義了mouseenter和mouseleave事件

//*********自定義的mouseenter和mouseleave
$('#f2').on('mouseenter',showit);
$('#f2').on('mouseleave',showit);

jquery封裝了mouseenter()、mouseleave()函數，並將mouseenter和mouseleave事件監聽器的綁定封裝到hover函數中

//*********將mouseenter和mouseleave封裝成hover
$('#f2').hover(showit,showit);

 參考：

https://blog.csdn.net/yu9696/article/details/68942408/

https://www.cnblogs.com/starof/p/4106904.html

https://www.cnblogs.com/tidhy/p/6661882.html