JavaScript中的鼠标事件

最新推荐文章于 2023-02-03 11:48:20 发布

Submerge~

最新推荐文章于 2023-02-03 11:48:20 发布

阅读量258

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/MixedSignals/article/details/105211159

版权

事件的三大要素
①事件绑定对象：指的是绑定事件和事件处理函数的标签，这个标签有可能不是触发事件的标签
②事件类型：绑定的标签的事件类型，鼠标事件、表单事件、键盘事件、触摸事件、特殊事件
③事件处理函数：触发事件时执行的程序。一个标签往往相同的事件类型只能绑定一个事件处理函数，如果要绑定多个事件处理函数，需要使用事件监听语法

①左键单击事件click

var oDiv = document.querySelector('div');
oDiv.onclick = function(){
alert('触发的是鼠标左键单击事件');
}

②左键双击事件dblclick，dbl是double（双）的简写，方便记忆

var oDiv = document.querySelector('div');
oDiv.ondblclick = function(){
console.log('触发的是鼠标左键双击事件');
}

③右键单击事件contextmenu

var oDiv = document.querySelector('div');
oDiv.oncontextmenu = function(){
console.log('触发的是鼠标右键事件');
}

④鼠标按键按下事件mousedown，当鼠标按下时触发事件
（鼠标的点击事件是两个动作完成的，一个是鼠标按下，一个是鼠标抬起。如果只有按下动作，只会触发mousedown。抬起时完成一个完整的点击效果，才会触发click）

var oDiv = document.querySelector('div');
oDiv.onmousedown = function(){
console.log('鼠标按下了');
}

⑤鼠标按键抬起事件mouseup，当鼠标抬起时触发事件

var oDiv = document.querySelector('div');
oDiv.onmouseup = function(){
console.log('鼠标抬起来了');
}

（鼠标按下和抬起不区分左键右键）

⑥鼠标移入事件mouseover和mouseenter，经过标签边界线的时候触发

<body>
    <div>我是div
        <span>我是span标签</span>
    </div>
    <script>
     var oDiv = document.querySelector('div');
        oDiv.onmouseover = function(){   // 经过子级会触发
            alert('我进来了1111');
        }

        oDiv.onmouseenter = function(){  // 经过子级不触发
            alert('我进来了2222');
        }
     </script>
</body>

⑦鼠标移出事件mouseout和mouseleave，经过标签边界线的时候触发

<body>
    <div>我是div
        <span>我是span标签</span>
    </div>
    <script>
     var oDiv = document.querySelector('div');
       oDiv.onmouseout = function(){   // 经过子级会触发
            alert('我进来了1111');
        }

       oDiv.onmouseleave = function(){  // 经过子级不触发
            alert('我进来了2222');
        }
     </script>
</body>

⑧鼠标移动事件mousemove，鼠标在标签范围内移动会触发事件，效果类似于:hover

var oDiv = document.querySelector('div');
oDiv.onmousemove = function(){
console.log('我动来动去');
}

Submerge~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫