js事件拓展 onload事件

拼搏现实的明天。 2022-07-13 23:19 225阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background-color: pink;
                cursor: pointer;
            }
            .aaa {
                background-color: red;
            }
        </style>
    </head>
    <body>
    <script>
    
    //-----------------------------js中的事件以及定义--------------------
                //1.事件源（引发后续事件的标签）
                //2.事件（js已经定义好，直接使用）
                //3.事件驱动程序（对样式和html的操作）（DOM操作）
    
    
                //需求：点击盒子，弹出对话框alert(1)。
                //步骤：
                //1.获取事件源（document.getElementById("box")）
                //2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }）
                //3.书写事件驱动程序。
    
    
                //1.获取事件源（document.getElementById("box")）
                var div = document.getElementById("box");
                //2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }）
                div.onclick = function () {
                    //3.书写事件驱动程序。
                    alert(1);
                }
    
    //-------------------------------事件的拓展----------------------
                //体验事件
                //1.事件源（引发后续事件的标签）
                //2.事件（js已经定义好，直接使用）
                //3.事件驱动程序（对样式和html的操作）（DOM操作）
    
    
                //需求：点击盒子，弹出对话框alert(1)。
                //步骤：
                //1.获取事件源（document.getElementById("box")）
                //2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }）
                //3.书写事件驱动程序。
    
    
                //1.获取事件源（document.getElementById("box")）
                var div = document.getElementById("box");
                //获取事件源(一共五种)
                //    var arr1 = document.getElementsByTagName("div");
                //    var arr2 = document.getElementsByClassName("leiming");
                //不掌握
                //    var arr3 = document.getElementsByName("aaa");
    
    
                //2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }）
                //1.匿名绑定
                div.onclick = function () {
                    //3.书写事件驱动程序。
                //        alert(1);
                    //可以操作标签的属性和样式。
                    div.className = "aaa";
                //        div.style.width = "200px";
                //        div.style.height = "200px";
                //        div.style.backgroundColor = "red";
                }
    
                //不能写写括号，否则成为了返回值（2.用函数名绑定）
                //    div.onclick = fn;
                //
                //    function fn() {
                //        //3.书写事件驱动程序。
                //        alert(1);
                //    }
    
                //
                //    //3.行内绑定
                //    function fn(){
                //        alert(1);
                //    }
    
    
    //-----------------------------onlaod事件-----------------------------
            //什么条件下触动这个事件呢？页面加载（文本和图片）完毕的时候。
            //用途
            //js的加载时和html同步加载的。（如果使用元素在定义元素之间，容易报错。）
            //整个页面上所有元素加载完毕在执行js内容
            //window.onload可以预防使用标签在定义标签之前。
            window.onload = function () {
                var aaa = document.getElementById("box");
                console.log(aaa);
                aaa.style.width = "100px";
            }
    
            //    var aaa = document.getElementById("box");
            //    console.log(aaa);
            //    aaa.style.width = "100px";
    
    </script>
    </body>
    </html>