鼠标事件

常见的鼠标事件有：单击、双击、鼠标移动上去、鼠标离开、鼠标按下、按下后松开、滚轮等几类。每个事件的写法也都有很多种。

举例说明:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <button>清理缓存</button>
    <div id="div1"></div>
</body>
</html>
<script type="text/javascript">


var btns=document.getElementsByTagName('button')
function aaa(){alert("恭喜您,清理成功")}

     btns[0].onclick=aaa //1. 鼠标单击 

    btns[0].onmousedown=function()//鼠标按下后,移开抬起不执行

    btns[0].onmouseup=function()//鼠标抬起

    btns[0].onmousemove=function()//鼠标移动


    btns[0].onmouseenter=function(){console.log('鼠标进入1')}
    btns[0].onmouseout=function(){ console.log('鼠标移出1')}
    //两相组合与:hover同效果

    btns[0].onmousemover=function(){console.log('鼠标进入2over')}
    
    btns[0].onmouseleave=function(){console.log('鼠标移出2')}

    btns[0].ondblclick=function(){console.log('鼠标双击')}

    btns[0].onmousewheel=function(){console.log('鼠标滚轮')}

</script>

 

posted @ 2021-12-05 21:41  絮行  阅读(55)  评论(0)  编辑  收藏  举报