看华为官网有感，使用Javascript、Jquery实现监听鼠标移入移出事件

在查看华为官网时有感而发，想想是不是应该整理一下鼠标移入移出事件，因为这个功能在写网站时会经常遇到，特此记录，希望对您有所帮助！

1. 原生JS实现监听鼠标移入移出
2. Jquery实现监听鼠标移入移出

1.原生JS实现监听鼠标移入移出事件

(1) 页面代码

<h2>JS监听鼠标移入移出事件</h2>
<button onmouseover="mouseover()">监听移入事件</button>
<button onmouseout="mouseout()">监听移出事件</button>
<button id="monitor">监听移入移出事件</button>
<h2>JQ监听鼠标移入移出事件</h2>
<button id="goMovein">监听移入事件</button>
<button id="goRemove">监听移出事件</button>
<button id="dzMonitor">监听移入移除事件</button>

(2) JS方法

 var btn=document.getElementById("monitor");
    function mouseover(){
        console.log("监听到鼠标移入")
    }
    function mouseout(){
        console.log("监听到鼠标移出")
    }
    btn.onmouseover=function(){
        console.log("监听到鼠标移入")
    }
    btn.onmouseout=function(){
        console.log("监听到鼠标移出")
    }

Jquery实现监听鼠标移入移出事件

  $('#goMovein').on({
        mouseover:function(){
            console.log("监听到鼠标移入")
        }
    })
    $('#goRemove').on({
        mouseout:function(){
            console.log("监听到鼠标移出")
        }
    });
    $("#dzMonitor").on({
        mouseover:function(){
            console.log("监听到鼠标移入")
        },
        mouseout:function(){
            console.log("监听到鼠标移出")
        }
    })

写在最后

如果你觉得这篇文章写得不错或者对您有用的话请帮忙点赞加收藏，毕竟原创不易；如果您觉得文章有什么地方写得不对或者需要改进的地方，欢迎通过评论私聊博主！