DOM文档事件详解

最新推荐文章于 2023-12-20 19:50:38 发布

blanceage

最新推荐文章于 2023-12-20 19:50:38 发布

阅读量475

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/blanceage/article/details/126776106

版权

本文详细介绍了DOM文档中的事件，包括窗口事件（如窗口聚焦和失焦）、表单事件（如文本框焦点变化）、键盘事件（如按键检测）、鼠标事件（如元素拖拽）和媒体事件，以及更多其他类型的事件，帮助理解如何利用这些事件响应用户交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.事件概述

HTML事件可以触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。

2.窗口事件

由窗口触发该事件 (同样适用于 <body> 标签)：

属性	描述
onblur	当窗口失去焦点时运行脚本。
onfocus	当窗口获得焦点时运行脚本。
onload	当文档加载之后运行脚本。
onresize	当调整窗口大小时运行脚本。
onstorage	当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本。

案例演示1：当窗口失去焦点时，输出“窗口失去焦点”

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    window.onblur = function () {
        console.log("窗口失去焦点");
    };
</script>
</body>
</html>

案例演示2：当窗口获取焦点时，输出“窗口获取焦点”

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    window.onfocus = function () {
        console.log("窗口获取焦点");
    };
</script>
</body>
</html>

案例演示3：当页面文档加载完成后，输出"Hello, World"

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    window.onload = function () {
        console.log("Hello,World");
    };
</script>
</body>
</html>

案例演示4：当调整窗口大小时，输出"窗口大小正在改变"

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    window.onresize = function () {
        console.log("窗口大小正在改变");
    };
</script>
</body>
</html>

3、表单事件

表单事件在HTML表单中触发 (适用于所有 HTML 元素，但该HTML元素需在form表单内)：

属性	描述
onblur	当元素失去焦点时运行脚本。
onfocus	当元素获得焦点时运行脚本。
onchange	当元素改变时运行脚本。
oninput	当元素获得用户输入时运行脚本。
oninvalid	当元素无效时运行脚本。
onselect	当选取元素时运行脚本。
onsubmit	当提交表单时运行脚本。

案例演示1：当文本框获取焦点，文本框背景为红色，当文本框失去焦点，文本框背景为黄色

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form>

最低0.47元/天解锁文章