老师请检查。我怎么发现onmousemove咋这么像onmouseover,效果原理上有啥区别?

老师请检查。我怎么发现onmousemove咋这么像onmouseover,效果原理上有啥区别?

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>mouse</title>
    <style type="text/css">
    #div{overflow:auto;width:200px;height:200px;border:2px solid gray;margin-bottom:20px;}
    #content{width:200px;height:100px;border:2px solid gray;}
    </style>
</head>
<body>
<div id="div">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod,tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo,consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse,cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non,proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="content"></div>
<script type="text/javascript">
            var p=document.getElementById("div");
            var con=document.getElementById("content");
            p.onmousemove=function(){
                p.style.color="red";//什么时候用this?
            }
            p.onmouseout=function(){
                p.style.color="green";
                con.innerHTML="";
                
            }
            p.onscroll=function(){
                con.innerHTML="内容滚动了";
            }
            
</script>
</body>
</html>


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

首先,效果实现的很好

其次,两个事件的区别如下:

时间上 onmousemove 事件触发后,再触发 onmouseover 事件。

动作上 onmouseover 只在刚进入区域时触发。onmousemove 除了刚进入区域触发外,在区域内移动鼠标,也会触发该事件。

 简单的理解onmouseover与onmousemove的区别就是:当鼠标移过当前对象时就产生了onmouseover事件(onmouseover有个移入移出的过程),当鼠标在当前对象上移动时就产生了onmousemove事件,只要是在对象上移动而且没有移出对象的,就是onmousemove事件。

希望可以帮到你!


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师