程序员-事件之力

最新推荐文章于 2024-05-03 11:47:20 发布

whd-go ahead boldly

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量128

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_49612237/article/details/115545055

版权

JavaScript中常见的事件

事件	意思
onclick()	鼠标左键点击事件
onmouseover	鼠标进入事件
onmouseout	鼠标离开事件
onfocus	获取焦点事件
onblur	失去焦点事件
onmousemove	鼠标移动事件
onscroll	滚动条滚动事件
onmousedown	鼠标按下事件
onmouseup	鼠标抬起事件
keyCode	获取按下的是哪个按键
onkeydown	键盘按下事件
onkeyup	键盘抬起事件

在这里插入图片描述

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

案例：点击按钮弹框

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

在这里插入图片描述

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>

在这里插入图片描述

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>

在这里插入图片描述

6.onmousemove 鼠标移动事件

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                width: 50px;
                height: 50px;
                background-color:red;
                position: absolute;
            }
        </style>
    </head>
    <body>
    <div id="dv"></div>
    <script>
        document.onmousemove = function (e) {
            //鼠标相对于页面的可视区域的横坐标
            var x = e.clientX;
            //鼠标相对于页面的可视区域的纵坐标
            var y = e.clientY;
            //div对象
            var dvobj = document.getElementById("dv");
            //设置div的横坐标
            dvobj.style.left = x + "px";
            //设置div的纵坐标
            dvobj.style.top = y + "px";
        };
    </script>
    
   
</body>

在这里插入图片描述

7.onscroll 滚动条滚动事件

<!DOCTYPE html>

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background-color:red;
                overflow: auto;
                margin: 0 auto;
                margin-top: 80px;
            }
        </style>
    </head>
    <body>
    <div id="dv">
       万般努力，只为出人头地。万般努力，只为出人头地。万般努力，只为出人头地。万般努力，只为出人头地。万般努力，只为出人头地。万般努力，只为出人头地。万般努力，只为出人头地。
       
    </div>
    <script>
        document.getElementById("dv").onscroll = function () {
            console.log("滚动条被拖动了");
        };
    </script>
    
</body>

在这里插入图片描述

8.onkeydown / onkeyup 键盘按下/抬起事件

 <body>
            <input type="text" id="txt">
            <script>
                document.getElementById("txt").onkeydown = function () {
                    console.log("键盘按下了");
                };
                document.getElementById("txt").onkeyup = function () {
                    console.log("键盘抬起了");
                };
            </script>
            </body>
        </body>

在这里插入图片描述

9.keyCode 获取按下的是哪个按键

<body>

    <script>
        //页面的任何的位置.按下键盘,获取按键的值
        document.onkeydown = function (e) {
            //console.log(e.keyCode);//事件参数对象
            switch (e.keyCode) {
                case 81:
                    console.log("英雄联盟按键您按下的是Q");
                    break;
                case 87:
                    console.log("英雄联盟按键您按下的是W");
                    break;
                case 69:
                    console.log("英雄联盟按键您按下的是E");
                    break;
                case 82:
                    console.log("英雄联盟按键您按下的是R");
                    break;
            }
        };
    </script>
</body>

在这里插入图片描述

10.onmousedown / onmouseup 鼠标按下/抬起事件

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                width: 50px;
                height: 50px;
                background-color:aqua;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
    <div id="dv"></div>
    <script>
        document.getElementById("dv").onmousedown = function () {
            console.log("鼠标按下了");
        };
        document.getElementById("dv").onmouseup = function () {
            console.log("鼠标抬起了");
        };
    </script>
    
    
</body>

在这里插入图片描述