web前端笔记(7)-鼠标事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   
    <button>点击他</button>

</body>
</html>
<script>
     var btns=document.getElementsByTagName('button')
    btns[0].onclick=function () {
        console.log("恭喜您，清理成功")
    }
    btns[0].onmousedown=function () {
        console.log("鼠标按下")
    }
    btns[0].onmouseup=function () {
        console.log("鼠标松开")
    }
    btns[0].onmousemove=function () {
        console.log("鼠标移动")
    }
    btns[0].onmouseenter=function () {
        console.log("鼠标进入2")
    }
    btns[0].onmouseover=function () {
        console.log("鼠标进入")
    }
    btns[0].onmouseleave=function () {
        console.log("鼠标移出2")
    }
    btns[0].onmouseout=function () {
        console.log("鼠标移出")
    }
    btns[0].onmousewheel=function () {
        console.log("鼠标滚轮")
    }
    btns[0].ondblclick=function () {
        console.log("鼠标双击")
    }
 
</script>




大家可以通过打开网页界面右键检查,用鼠标操作按钮测试一下效果.






            

            
posted @ 
2021-11-29 22:10 
楊樂多 
阅读(166) 
评论(0) 
 
收藏 
举报