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