当前位置：首页 > news >正文

HTML之JavaScript DOM（document）编程处理事件

news 来源：原创 2025/5/18 2:30:27

HTML之JavaScript DOM（document）编程处理事件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            事件：本质是行为，用户的行为或者浏览器的行为；事件发生指的是处罚js函数执行
            事件的三要素：事件源、事件、事件处理程序
            事件的绑定：
            1.通过元素的属性绑定 on***
            2.通过DOM编程动态绑定
            注：
                1.一个事件可以绑定多个函数；eg：onclick="show(),show1()
                2.一个元素可以绑定多个事件  eg：onclick="show()" ondblclick="show2()"

            常见的事件：
            1.鼠标事件
            2.键盘事件
            3.表单事件
            4.页面加载事件onload ：页面加载完毕事件

            事件的触发
                1.行为触发
                2.DOM编程触发
                

            
        */
    </script>
    <!-- 代码顺序影响浏览器执行代码的时间
            解决方案：等页面加载完毕之后再加载js脚本
    -->
    <script>
        // 方法一：
        // function ready() {
        //     // 通过DOM获得要操作的元素
        //     var btn = document.getElementById("btn1"); //返回一个对象
        //     // 绑定一个单击事件
        //     btn.onclick = function () {  //隐函数
        //         alert("11");
        //     }
        // }
        // 方法二：此方法无需在body标签中再加onload
        window.onload = function () {
            // 通过DOM获得要操作的元素
            var btn = document.getElementById("btn1"); //返回一个对象
            // 绑定一个单击事件
            btn.onclick = function () {  //隐函数
                alert("11");
            }

            // 为div1绑定事件
            var d1 = document.getElementById("div1");
            d1.onclick = function () {
                console.log("已点击")
                div1.style.backgroundColor = "red"
            }

            // 通过按钮触发div事件
            btn.onclick = function () {  //隐函数
                alert("变色")
                //通过dom编程触发事件，相当于触发了某些事件发生了
                d1.onclick()
            }
        }



    </script>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 1px;
        }
    </style>
</head>

<!-- <body onload="ready()">   跟方法一搭配-->

<body>
    <input type="button" id="btn1" value="按钮">

    <div class="div1" id="div1">


    </div>

</body>

</html>