鼠标事件

一、鼠标事件
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>

 

posted @ 2021-12-26 09:52  WW&xx  阅读(661)  评论(0)  编辑  收藏  举报