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

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

1、有关js中的mouseover和mouseout

原生js的事件类型是mouserout和mouseover，之前提到的事件冒泡的缺陷就在这里，之前说的使用阻止冒泡就行，大概说得太轻易。来理一理它们的触发顺序吧。

 

如上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').οnmοuseοver=hoverit;            document.getElementById('f1').οnmοuseοut=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);

 参考：