HTML中的DOM事件——鼠标事件、键盘事件、框架对象事件、表单事件

HTML中的DOM事件——鼠标事件、键盘事件、框架/对象事件、表单事件

1. 什么是事件

是通过用户进行触发的一些行为。比如：点击、双击、键盘按下抬起等等都称为事件。
事件在触发的时候会产生一个事件对象。

2.事件的添加方式

在标签内添加事件名称，并调用对应的事件处理函数

<body>
    <button id="box" onclick="a()">按钮</button>
</body>
<script>
    function a() {
        console.log("点击了");
    }
</script>
1
2
3
4
5
6
7
8

通过获取 DOM 对象，然后添加事件，并赋值的事件的处理函数。

<body>
    <button id="box">按钮</button>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    // 给元素添加事件
    box.onclick = function (event) {
        console.log("点击了");
        console.log(event);
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12

通过监听的方式添加事件。

<body>
    <button id="btn">按钮</button>
</body>
<script>
    var btn = document.getElementById("btn");
    // 通过添加事件的监听
    // 第一个参数是事件的类型
    // 第二个参数是事件的处理函数
    btn.addEventListener("click", function (event) {
        console.log("点击了");
        console.log(event); 
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

3. 鼠标事件

3.1 单机事件 onclick

3.2 双击事件 ondblclick

<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    box.ondblclick = function () {
        console.log("双击了");
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.3 鼠标按下事件 onmousedown

鼠标在某一个元素中进行按下操作时会触发

<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    box.onmousedown = function () {
        console.log("鼠标按下");
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.4 鼠标抬起事件 onmouseup

<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    box.onmouseup = function () {
        console.log("鼠标抬起");
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.5 鼠标进入事件 onmouseenter

<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    box.onmouseenter = function () {
        console.log("鼠标进入");
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.6 鼠标离开事件 onmouseleave

<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    box.onmouseleave = function () {
        console.log("鼠标离开");
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.7 鼠标移动事件 onmousemove

<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    box.onmousemove = function () {
        console.log("鼠标移动");
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.8 鼠标移入 onmouseover

<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    box.onmouseover = function () {
        console.log("鼠标移入");
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.9 鼠标移除 onmouseout

<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    box.onmouseout = function () {
        console.log("鼠标移出");
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4. 键盘事件

4.1 某个键盘按键被按下：onkeydown

<script>
    document.body.onkeydown = function (event) {
        console.log(event.keyCode); // 获取键盘按键的键码
        console.log("键盘按下");
    };
</script>
1
2
3
4
5
6

4.2 某个键盘按键被松开：onkeyup

<script>
    document.body.onkeyup = function (event) {
        console.log(event.keyCode); // 获取键盘按键的键码
        console.log("键盘抬起");
    };
</script>
1
2
3
4
5
6

4.3 某个键盘按键被按下并松开：onkeypress

<script>
    document.body.onkeypress = function (event) {
        console.log(event.keyCode); // 获取键盘按键的键码
        console.log("键盘按下并抬起");
    };
</script>
1
2
3
4
5
6

5. 框架/对象(Frame/Object) 事件

5.1 一张页面或一幅图像完成加载：onload

<head>
    <script>
        // 页面加载事件 这个事件通过情况下绑定在 window
        window.onload = function () {
            foo();
            var box = document.getElementById("box");
            console.log(box);
        };
        function foo() {
            console.log("foo");
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

5.2 当文档被滚动时发生的事件：onscroll

<head>
    <style>
        #box {
            height: 3000px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    window.document.onscroll = function () {
        console.log("滚动事件触发了");
        // 获取文档滚动的高度
        var top = document.documentElement.scrollTop;
        console.log(top);
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5.3 窗口或框架被重新调整大小：onscroll

<script>
    window.onresize = function () {
        console.log("窗口大小变化了");
    };
</script>
1
2
3
4
5

6. 表单事件

6.1 元素失去焦点时触发：onblur

<body>
    <form action="" method="get">
        <p>
            用户名：
            <input type="text" id="username" />
        </p>
        <input type="submit" value="提交" />
    </form>
</body>
<script>
    var username = document.getElementById("username");
    username.onblur = function () {
        console.log("失焦了");
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

6.2 该事件在表单元素改变时触发：onchange

<body>
    <form action="" method="get">
        <p>
            用户名：
            <input type="text" id="username" />
        </p>
        <input type="submit" value="提交" />
    </form>
</body>
<script>
    var username = document.getElementById("username");
    username.onchange = function () {
        // 当你失焦了才能触发 或者 回车
        console.log("输入了");
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

6.3 元素获取焦点时触发：onfocus

<body>
    <form action="" method="get">
        <p>
            用户名：
            <input type="text" id="username" />
        </p>
        <input type="submit" value="提交" />
    </form>
</body>
<script>
    var username = document.getElementById("username");
    username.onfocus = function () {
        console.log("获取焦点");
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

6.4 元素获取用户输入时触发：oninput

<body>
    <form action="" method="get">
        <p>
            用户名：
            <input type="text" id="username" />
        </p>
        <input type="submit" value="提交" />
    </form>
</body>
<script>
    var username = document.getElementById("username");
    username.oninput = function () {
        // 当每输入一个值的时候就触发
        console.log("oninput事件触发了");
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

6.5 表单提交时触发：onsubmit

<body>
    <form id="form" action="" method="get" onsubmit="login()">
        用户名：
        <input type="text" id="username" />
        </p>
    <input type="submit" value="提交" />
    </form>
</body>
<script>
    // 表单的处理函数
    function login() {
        alert("表单已经提交了");
    }

    var form = document.getElementById("form");
    form.onsubmit = function () {
        alert("登陆");
        // 组织表单的默认行为 阻止一直刷新
        // event.preventDefault();
        return false 
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

相关阅读:
创建第一个Springboot 项目
 dtcloud 的消息机制（二）
2022年Java秋招面试必看的|Java并发编程面试题
 小程序中如何给会员卡设置到期时间
 c++随机数
 .NET应用系统的国际化-基于Roslyn抽取词条、更新代码
 2022年下半年系统架构设计师下午真题及答案解析
 C/C++语言的服务器LS调研 (Language Server 实现代码索引跳转定义智能提示等功能)
文件上传下载原理及实现逻辑
 Rancher系列文章-Rancher v2.6使用脚本实现导入集群
原文地址：https://blog.csdn.net/weixin_44867717/article/details/125632882