JavaScript中常见的鼠标事件

程序员文章站 2024-01-11 16:37:58

...

1.onclick() 鼠标左键单击事件

2.onmouseover 鼠标进入事件

3.onmouseout 鼠标离开事件

4.onfocus 获取焦点事件

5.onblur 失去焦点事件

1.onclick() 鼠标左键单击事件

案例：点击按钮弹框

<body>
<input type="button" value="按钮" id="btn">
<script>
    document.getElementById("btn").onclick = function () {
        alert("点击了");
    };
</script>
</body>

JavaScript中常见的鼠标事件

2.onmouseover 鼠标进入事件

3.onmouseout 鼠标离开事件

案例：鼠标进入红色，离开蓝色（放上去就可以，不用点击）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="dv"></div>
<script>
    document.getElementById("dv").onmouseover = function () {
        document.getElementById("dv").style.backgroundColor = "red";
    };
    document.getElementById("dv").onmouseout = function () {
        document.getElementById("dv").style.backgroundColor = "";
    };
</script>
</body>

JavaScript中常见的鼠标事件

4.onfocus 获取焦点事件

5.onblur 失去焦点事件

案例：文本框

<body>
<input type="text" value="请输入内容" id="te">
<script>
    document.getElementById("te").onfocus = function () {
        document.getElementById("te").value = "";
    };
    document.getElementById("te").onblur = function () {
        document.getElementById("te").value = "请输入内容";
    };
</script>
</body>

JavaScript中常见的鼠标事件