DOM0级事件

1.通过DOM获取HTML元素
2.(获取HTML元素).事件=执行脚本
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用

<style>
        .lock{
            width:140px;height: 30px;line-height:30px;
            background: #f00;color:#fff;font-size:14px;text-align:center;
            border-radius:5px; cursor:pointer;margin-top30px;
        }
         .unlock{
            width:140px;height: 30px;line-height:30px;
            background: #689;color:#ccc;font-size:14px;text-align:center;
            border-radius:5px; cursor:pointer;margin-top30px;
        }
    </style>


 <div class="lock" id="btn">锁定</div>
    <script>
        //获取按钮
        var btn=document.getElementById("btn")
        //给定按钮绑定事件
        btn.onclick = function(){
            // this.className=".unlock";//改变（替换）原来的类
            // this.innerHTML="解锁";//改变标签中的文本内容

            //第一种方法 根据类判断
            // 判断如果按钮是锁定，则显示为解锁，变为灰色
            // 否则显示为锁定，变为蓝色
            if(this.className=="lock"){
                this.className="unlock";
                this.innerHTML="解锁";
            }else{
                this.className="lock";
                this.innerHTML="锁定";
            }

            //第二种方法 根据文本判断
            // if(this.innerHTML="锁定"){
            //     this.className="unlock";
            //     this.innerHTML="解锁";
            // }else{
            //     this.className="lock";
            //     this.innerHTML="锁定";
            // }

        }

    </script>

不建议使用HTML事件，原因是
1.多元素绑定相同事件，效率低
2.不建议在HMTL元素中写JS代码

上面代码中可以不用匿名函数
可以自定义函数

css样式
 <style>
        .lock{
            width:140px;height:30px;line-height:30px;background:#00f;
            color:#fff;font-size:14px;text-align:center;border-radius:5px;
            cursor:pointer;margin-top:30px;
        }
        .unlock{
            width:140px;height:30px;line-height:30px;background:#666;
            color:#ccc;font-size:14px;text-align:center;border-radius:5px;
            cursor:pointer;margin-top:30px;
        }
    </style>

JS代码

<body>
    <div id="btn" class="lock">锁定</div>
    <!--获取id为btn--DOM元素-->
    <script>
        btn = document.getElementById("btn");
        //自定义函数
        function clickBn(){
             if(this.className=="lock"){
                this.className="unlock";
                this.innerHTML="解锁";
            }else{
                this.className="lock";
                this.innerHTML="锁定";
            }
        }
        btn.onclick = clickBn;
        //点击按钮调用clickBn这个函数；
         // 这里有一个需要注意的事项是调用自定义的函数的时候，不能在函数后面家函数
    </script>
</body>

DOM0级事件

推荐阅读更多精彩内容