JavaScript DOM文档事件

发布于：2022-12-26 ⋅ 阅读:(515) ⋅ 点赞:(0)
微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

一、事件概述：

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

二、窗口事件：

1、分类：

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

2、案例演示：

 2.1当窗口失去焦点时，输出“窗口失去焦点”：

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

<script>
    window.onblur = function () {
        console.log("窗口失去焦点");
    };
</script>
</body>
</html>

 2.2当窗口获取焦点时，输出“窗口获取焦点”：

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

<script>
    window.onfocus = function () {
        console.log("窗口获取焦点");
    };
</script>
</body>
</html>

 2.3当页面文档加载完成后，输出"Hello, World"：

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

<script>
    window.onload = function () {
        console.log("Hello,World");
    };
</script>
</body>
</html>

 2.4当调整窗口大小时，输出"窗口大小正在改变"：

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

<script>
    window.onresize = function () {
        console.log("窗口大小正在改变");
    };
</script>
</body>
</html>

 三、表单事件

1、含义：

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

2、分类：

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

3、案例演示：

 3.1当文本框获取焦点，文本框背景为红色，当文本框失去焦点，文本框背景为黄色：

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

<script>
    var textInput = document.getElementById("text");

    /* 当文本框获取焦点，文本框背景为红色 */
    textInput.onfocus = function () {
        this.style.background = "red";
    };

    /* 当文本框失去焦点，文本框背景为绿色 */
    textInput.onblur = function () {
        this.style.background = "green";
    };
</script>
</body>
</html>

 3.2当文本框内容改变时，鼠标离开文本框，自动将文本框的内容输出到控制台:

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

<script>
    var textInput = document.getElementById("text");

    /* 当文本框内容改变时，鼠标离开文本框，自动将文本框的内容输出到控制台 */
    textInput.onchange = function () {
        console.log(this.value);
    };
</script>
</body>
</html>

 3.3当文本框内容改变时，立即将改变的内容输出到控制台:

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

<script>
    var textInput = document.getElementById("text");

    /* 当文本框内容改变时，立即将改变的内容输出到控制台 */
    textInput.oninput = function () {
        console.log(this.value);
    };
</script>
</body>
</html>

 3.4如果单击“submit”，则不填写文本字段，将发生警报消息:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form>
    <input type="text" id="text" required>
    <input type="submit" value="submit">
</form>

<script>
    var textInput = document.getElementById("text");

    /* 如果单击“submit”，则不填写文本字段，将发生警报消息 */
    textInput.oninvalid = function () {
        console.log("请您完善表单内容！");
    };
</script>
</body>
</html>

 3.5当选中文本框的内容时，输出“您已经选择了文本框内容！”:

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

<script>
    var textInput = document.getElementById("text");

    /* 当选中文本框的内容时，输出“您已经选择了文本框内容！” */
    textInput.onselect = function () {
        console.log("您已经选择了文本框内容！");
    };
</script>
</body>
</html>

 3.6当提交表单的时候，在控制台输出“表单提交”:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form id="myform">
    <input type="submit" id="submit">
</form>

<script>
    var myform = document.getElementById("myform");

    /* 当提交表单的时候，在控制台输出“表单提交” */
    myform.onsubmit = function () {
        console.log("表单提交");
        return false;/* 用来阻止表单提交的，你不写它会跳转请求 */
    };
</script>
</body>
</html>

四、键盘事件

1、含义：

通过键盘触发事件。

2、分类：

  • onkeydown                      当按下按键时运行脚本。
  • onkeyup                           当松开按键时运行脚本。
  • onkeypress                      当按下并松开按键时运行脚本。

3、案例演示：

 3.1当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false：

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

<script>
    /* 当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false */
    window.onkeydown = function (event) {
        /* 解决兼容性问题 */
        event = event || window.event;

        if (event.keyCode == 65) {
            console.log("true");
        } else {
            console.log("false");
        }
    };
</script>
</body>
</html>

 3.2使div可以根据不同的方向键向不同的方向移动：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background: red;position: absolute;"></div>

<script>
    var box = document.getElementById("box");

    //为document绑定一个按键按下的事件
    document.onkeydown = function (event) {
        event = event || window.event;

        // 定义移动速度
        var speed = 10;

        // 选择移动方向
        switch (event.keyCode) {
            case 37:
                box.style.left = box.offsetLeft - speed + "px";
                break;
            case 39:
                box.style.left = box.offsetLeft + speed + "px";
                break;
            case 38:
                box.style.top = box.offsetTop - speed + "px";
                break;
            case 40:
                box.style.top = box.offsetTop + speed + "px";
                break;
        }
    };
</script>
</body>
</html>

 五、鼠标事件

1、含义：

通过鼠标触发事件。

2、分类：

  • onclick                           当单击鼠标时运行脚本。
  • ondblclick                      当双击鼠标时运行脚本。
  • onmousedown               当按下鼠标按钮时运行脚本。
  • onmouseup                    当松开鼠标按钮时运行脚本。
  • onmousemove               当鼠标指针移动时运行脚本。
  • onmouseover                 当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡。
  • onmouseout                   当鼠标指针移出元素时运行脚本，不可以阻止冒泡。
  • onmouseenter                当鼠标指针移至元素之上时运行脚本，可以阻止冒泡。
  • onmouseleave                当鼠标指针移出元素时运行脚本，可以阻止冒泡。
  • onmousewheel               当转动鼠标滚轮时运行脚本。
  • onscroll                           当滚动元素的滚动条时运行脚本。

3、案例演示：

 3.1创建一个正方形div，默认颜色为黑色，当鼠标移入div，背景颜色变为红色，当鼠标移出div，背景颜色变为绿色：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background: black;"></div>

<script>
    var box = document.getElementById("box");

    /* 当鼠标移入div，背景颜色变为红色 */
    box.onmouseenter = function () {
        this.style.background = "red";
    };

    /* 当鼠标移出div，背景颜色变为绿色 */
    box.onmouseleave = function () {
        this.style.background = "green";
    };
</script>
</body>
</html>

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布