原生JS中常用的鼠标事件有哪些？

最新推荐文章于 2023-05-25 11:13:54 发布

打了个嗝~

最新推荐文章于 2023-05-25 11:13:54 发布

阅读量949

点赞数 2

文章标签： javascript 计算机外设 html

本文链接：https://blog.csdn.net/m0_64439351/article/details/130292033

版权

常用的鼠标事件

类型	事件
onclick	单击鼠标左键时发生，如果右键也按下则不会发生
ondblclick	双击鼠标左键时发生，如果右键也按下则不会发生
onmouseover	鼠标移入某块元素时触发
onmouseout	鼠标移出某块元素时触发
onmousemove	鼠标在某个元素上移动时持续触发
onmousedown	鼠标按下后触发
onmouseup	鼠标抬起后触发

为方便演示，在此先设置一个div元素

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
        }
</style>
<body>
    <div></div>
</body>

事件代码如下

1.onclick

单击鼠标左键时发生，如果右键也按下则不会发生

  <script>
        var divObj = document.querySelector('div')
        divObj.onclick=function(){
            console.log('点击事件');
        }
    </script>

2.ondblclick

双击鼠标左键时发生，如果右键也按下则不会发生

  <script>
        var divObj = document.querySelector('div')
        divObj.ondblclick=function(){
            console.log('双击事件');
        }
    </script>

3.onmouseover

鼠标移入某块元素时触发

<script>
        var divObj = document.querySelector('div')
        divObj.onmouseover=function(){
            console.log('我进来啦');
        }
    </script>

4.onmouseout

鼠标移出某块元素时触发

<script>
        var divObj = document.querySelector('div')
        divObj.onmouseout=function(){
            console.log('我出来啦');
        }
    </script>

5.onmousemove

鼠标在某个元素上移动时持续触发

<script>
        var divObj = document.querySelector('div')
        divObj.onmousemove=function(){
            console.log('我在动');
        }
    </script>

6.onmousedown

鼠标按下后触发

<script>
        var divObj = document.querySelector('div')
        divObj.onmousedown =function(){
            console.log('我按下了');
        }
    </script>

7.onmouseup

鼠标抬起后触发

<script>
        var divObj = document.querySelector('div')
        divObj.onmouseup =function(){
            console.log('我起来了');
        }
    </script>