JS鼠标各种事件

未来aaa

于 2021-12-08 15:28:00 发布

阅读量125

点赞数

分类专栏：前端 JavaScript 鼠标事件文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weilai_a/article/details/121792384

版权

前端同时被 3 个专栏收录

25 篇文章

订阅专栏

JavaScript

8 篇文章

订阅专栏

鼠标事件

1 篇文章

订阅专栏

本文详细介绍了JavaScript中的基本事件处理，包括点击、双击、右击、按下、抬起、移入、移出、进入和离开等事件。重点讲解了onmouseover、onmouseout与onmouseenter、onmouseleave的区别，前者会触发自身及父级元素的事件，而后者仅触发自身事件，为JavaScript前端开发提供了关键的交互理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 // js三部曲：获取元素，绑定事件，做对应的事
        // 点击事件
        document.getElementById('box1').onclick=function(){
            console.log("点击事件")
        }
        // 双击事件
        document.getElementById('box2').ondblclick=function(){
            console.log('双击事件')
        }
        // 右击事件
        document.getElementById('box3').oncontextmenu=function(){
            console.log('右击事件')
        }
        // 按下事件
        document.getElementById('box4').onmousedown=function(){
            console.log('按下事件')
        }
        // 抬起事件
        document.getElementById('box5').onmouseup=function(){
            console.log('抬起事件')
        }
        // 移入事件
        document.getElementById('box6').onmouseover=function(){
            console.log('移入事件')
        }
        // 移出事件
        document.getElementById('box7').onmouseout=function(){
            console.log('移出事件')
        }
        // 进入事件
        document.getElementById('box8').onmouseenter=function(){
            console.log('进入事件')
        }
        // 离开事件
        document.getElementById('box9').onmouseleave=function(){
            console.log('离开事件')
        }

onmouseover,onmouseout和onmouseenter,onmouseleave区别

两者达到的效果相同

onmouseover和onmouseout不仅会触发自身事件，同时也会触发父级元素的事件

onmouseenter和onmouseleave只会触发自身事件。