DOM事件

妍华之喜

已于 2022-04-27 17:59:57 修改

阅读量439

点赞数 2

文章标签： javascript

于 2020-12-21 09:32:52 首次发布

本文链接：https://blog.csdn.net/XVJINHUA954/article/details/111467284

版权

DOM事件

JavaScript事件

JavaScript事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。
JavaScript事件是可以被JavaScript侦测到的行为.

JavaScript事件发生的条件

主角(事件源):触发事件的元素
发生什么事(事件类型):比如单击,移动到上方等等
做什么事(事件处理程序):事件被触发以后执行的代码(函数),这个函数就是在这个元素被触发了对应的事件后自己执行的函数

执行事件的步骤

获取事件源
绑定事件
添加事件的处理程序
运行并触发事件

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM事件</title>
    <style>
        #mydiv {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div id="mydiv">
        这是一个div
    </div>

    <script>
        window.onload = function () {
            // 获取事件源
            var mydiv = document.querySelector("#mydiv");
            // 绑定事件
            mydiv.onclick = function () {
                // 添加事件的处理程序
                alert("你好");
            }
        }
    </script>
</body>

</html>

JavaScript中常用的DOM事件

属性	当以下情况发生时，出现此事件
onabort	当图像加载被中断时
onblur	当用户离开输入字段时(元素失去焦点)
onchange	当用户更改输入字段的内容时
onclick	当鼠标点击某个对象时
ondblclick	当鼠标双击某个对象时
onerror	当加载文档或图像时发生某个错误时
onfocus	当输入字段获得焦点时(元素获得焦点)
onkeydown	当某个键盘的键被按下时
onkeypress	当某个键盘的键被按下或按住时
onkeyup	当某个键盘的键被松开时
onload	当某个页面或图像被完成加载时
onmousedown	当某个鼠标按键被按下时
onmousemove	当鼠标被移动时
onmouseout	当鼠标从某元素移开时
onmouseover	当鼠标被移到某元素之上时
onmouseup	当某个鼠标按键被松开时
onreset	当重置按钮被点击时
onresize	当窗口或框架被调整尺寸时
onselect	当文本被选定时
onsubmit	当提交按钮被点击时
onunload	当用户退出页面时

案例:

实现密码正确错误判断的功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码判断</title>
    <style>
        /* 导入字体样式库 */
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?vdlx6t');
            src: url('fonts/icomoon.eot?vdlx6t#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?vdlx6t') format('truetype'),
                url('fonts/icomoon.woff?vdlx6t') format('woff'),
                url('fonts/icomoon.svg?vdlx6t#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        * {
            margin: 0px;
            padding: 0px;
        }

        .boxsum {
            height: 50px;
            margin-top: 100px;
            margin-left: 50px;
        }

        .boxmax {
            width: 500px;
            height: 50px;
            margin: 0px auto;
            line-height: 50px;
        }

        .pd {
            color: red;
            font: 12px "icomoon";
        }
    </style>
</head>

<body>
    <!-- 实现密码正确错误判断功能 -->
    <!-- 密码是:123456 -->
    <div class="boxsum">
        <div class="boxmax">
            <label for="pwd">请输入密码:</label>
            <input type="password" id="pwd">
            <i class="pd"></i>
        </div>
    </div>

    <script>
        window.onload = function () {
            var mm = document.querySelector("#pwd")
            var dc = document.querySelector(".pd")
            mm.oninput = function () {
                if (mm.value == "123456") {
                    dc.innerHTML = ""
                    dc.style.color = "skyblue"
                } else {
                    dc.innerHTML = ""
                    dc.style.color = "red"
                }
            }

        }
    </script>
</body>

</html>