首页 > 其他分享> > js中鼠标事件

js中鼠标事件

2021-12-09 10:32:39 作者：互联网

　　鼠标事件

　　　　　1.事件：

事件，是一种可以被js检测到的行为，本质是一种交互操作

　事件的作用：

　　　　① 各个元素之间可以借助事件进行交互

　　　　 ② 用户和页面之间也可以通过事件交互

　　　　 ③ 后端和页面之间也可以通过事件交互

　　注意，事件通常与函数配合使用，事件发生时触发函数执行

2.鼠标事件

js鼠标事件是指通过鼠标一系列操作（如点击、进入等）来出发的时间

　　① 鼠标事件类型：

　　　 click，单击事件

　　　　dblclick，双击事件

　　　　 mousedown，鼠标按下时触发

　　　 mouseup，鼠标抬起时触发

　　　　 mousemove，鼠标移动时触发

　　　　 mouseenter，鼠标移入时触发（不冒泡）

　　　　 mouseleave，鼠标移除时触发（不冒泡）

　　　　 mouseover，鼠标移入时触发（冒泡）

　　　　 mouseout，鼠标移出时触发（冒泡）

　　语法：元素节点 .on+鼠标事件名 = 调用函数名；

示例：slem .ondblclick = function(){ 函数体; };

　② 鼠标事件原则
　　　　鼠标的基本事件默认采用冒泡传递

　　　　可以给一个节点添加多个鼠标事件，不同的鼠标事件之间互不影响

　　　　mouseenter和mouseleave两个事件为不冒泡事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>我们检测到您的电脑存在2.4G的垃圾，请点击清理缓存，进行清理</p>
<button>清理缓存</button>
</body>
</html>
<script>
    // onm ousedown  ,onmouseup,onmousemove,onmouseenter,onmouseover,onmouseleave,
    //     onm ouseout,onmousewheel,ondblclick
    var btns=document.getElementsByTagName('button')

    btns[0].onmousedown=function () {
        console.log("鼠标按下")
    }
    btns[0].onmouseup=function () {
        console.log("鼠标抬起")
    }
    btns[0].onmousemove=function () {
        console.log("鼠标移动")
    }
    btns[0].onmouseenter=function () {
        console.log("鼠标进入")
    }
    btns[0].onmouseover=function () {
        console.log("鼠标进入over")
    }
    btns[0].onmouseleave=function () {
        console.log("鼠标移出2")
    }
    btns[0].onmouseout=function () {
        console.log("鼠标移出")
    }
    btns[0].onmousewheel=function () {
        console.log("鼠标滚动")
    }
    btns[0].onmousedblclick=function () {
        console.log("鼠标双击")
    }


</script>

标签：function,console,鼠标,log,js,事件,btns
来源： https://www.cnblogs.com/wyl2001/p/15665842.html