鼠标事件

Posted 2021-12-28 WW&xx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标事件相关的知识，希望对你有一定的参考价值。

一、鼠标事件
click：点击事件。

mousedown：鼠标指针移动到元素上方，并按下鼠标左键时，会发生 mousedown 事件。通常与 mouseup() 方法一起使用。

mousemove：鼠标指针在指定的元素中移动时，就会发生 mousemove事件。哪怕移动一个像素，就会发生一次 mousemove 事件。(处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。)

mouseup：鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件。

contextmenu：单击右键触发 contextmenu 事件。

mouseover：鼠标指针位于元素上方时，会发生 mouseover 事件。
mouseout：鼠标指针离开被选元素时，会发生 mouseout 事件。

mouseenter：鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。
mouseleave：鼠标指针离开被选元素时，会发生 mouseleave 事件。（注：hover=mouseenter + mouseleave）

二、区分鼠标按键
在事件对象里，用有button来区分鼠标的按键，0（左键）/1（滚轴）/2（右键）
/*DOM3标准规定：click事件只能监听左键,只能通过mousedown 和 mouseup来判断鼠标键*/

三、事件区别
onmouseover、nmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件

onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件

四、实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>检测到您的电脑有2.4G的垃圾，点击立即清理！</p>
<button>清理缓存</button>

</body>
</html>
<script>
    // onclick;onmousedown;onmouseup;onmousemove;onmouseover;onmouseenter;onmouseleave;onmouseout;onmousewheel;ondblclick;
    var btns=document.getElementsByTagName(\'button\')
    btns[0].onclick=function () 
        alert(\'清理成功\')
    
    btns[0].onclick=function () 
        console.log(\'click\')
    
    btns[0].onmousedown=function () 
        console.log(\'按下\')
    
    btns[0].onmouseup=function () 
        console.log(\'抬起\')
    
    btns[0].onmouseenter=function () 
        console.log(\'进入\')
    
    btns[0].onmouseleave=function () 
        console.log(\'离开\')
    
    btns[0].onmouseout=function () 
        console.log(\'出去\')
    
    btns[0].onmouseover=function () 
        console.log(\'上方\')
    
</script>

以上是关于鼠标事件的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript期末复习

HTML代码片段

onclick是鼠标点击事件，按下回车事件是啥代码？

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -＞ PhoneWindow -＞ DecorView -＞ ViewGroup )(代码片段

jquery鼠标点击事件是啥？