DOM0级事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM0级事件</title>
    <!-- 
        DOM0级事件：首先获取HTML元素对象，然后在script中给dom设置事件
        ele.事件=代码a；在元素ele中绑定事件，触发事件后执行代码a
        别让HTML把script的活给抢了
        
        tips：
        1）script中使用事件来调用函数时，不能带上函数的括号();如果带上()，在刷新页面时会直接执行函数，而不是通过事件来触发函数
     -->
     <style>
         .inp{background: green;}
         #di{
             width: 100px;
             height: 30px;
             margin-top: 10px;
             border-radius: 5px/5px;
             text-align: center;
             line-height: 30px;
         }
         .div1{background: yellow;}
         .div2{background: grey;}
     </style>
</head>
<body>
    <input class="inp" type="button" value="锁定" />
    <div id="di" class="div1">锁定</div>
    <script>
        //input
        var a=document.getElementsByClassName("inp")[0];//获取按钮
        a.onclick=function (){   //设置DOM0级事件：点击按钮后执行匿名函数
            if (this.getAttribute("value")=="锁定"){    //如果按钮value="锁定"
                this.setAttribute("value","解锁");  //则执行value="解锁"
                this.style.background="gray";   //且按钮背景颜色变成灰色    
            }else{                              //否则
                this.setAttribute("value","锁定");  //执行value="锁定"
                this.style.background="green";  //且按钮背景颜色变成绿色
            }
        }
        //div
        var div=document.getElementById("di");
        div.onclick=ck;    //调用ck函数，不加()；如果加()刷新页面会直接执行函数ck
        function ck(){
            if (this.innerHTML=="锁定"){//如果this=div中内容为“锁定”
                this.innerHTML="解锁";//则将内容改为“解锁”
                this.className="div2";//且类名改为“this2”
            }else{         //否则
                this.innerHTML="锁定";//将内容改为“锁定”
                this.className="div1";//且类名改为“div1”
            }
        }
    </script>
</body>
</html>
猜你喜欢
