事件简单学习|青训营笔记这是我参与「第四届青训营」笔记创作活动的的第22天 1.DOM简单学习为满足案例要求，在此首

这是我参与「第四届青训营」笔记创作活动的的第22天

1.DOM简单学习

为满足案例要求，在此首先对DOM进行简单学习

功能：控制html文档的内容
获取页面标签(元素)对象：Element
- document.getElementById("id值"):通过元素的id获取元素对象
操作Element对象：
1. 修改属性值：
  1. 明确获取的对象是哪一个？
  2. 查看API文档，找其中有哪些属性可以设置
2. 修改标签体内容：
  - 属性：innerHTML
  1. 获取元素对象
  2. 使用innerHTML属性修改标签体内容

2.事件

功能：某些组件被执行了某些操作后，触发某些代码的执行。
- 造句： xxx被xxx,我就xxx
  - 我方水晶被摧毁后，我就责备对友。
  - 敌方水晶被摧毁后，我就夸奖自己。

如何绑定事件

直接在html标签上，指定事件的属性(操作)，属性值就是js代码事件：onclick--- 单击事件
通过js获取元素对象，指定事件属性，设置一个函数

代码：

    <body>
        <img id="light" src="img/off.gif"  onclick="fun();">
        <img id="light2" src="img/off.gif">

        <script>
            function fun(){
                alert('我被点了');
                alert('我又被点了');
            }

            function fun2(){
                alert('咋老点我？');
            }

            //1.获取light2对象
            var light2 = document.getElementById("light2");
            //2.绑定事件
            light2.onclick = fun2;


        </script>
    </body>


案例1：电灯开关

 ```js
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>电灯开关</title>

    </head>
    <body>

    <img id="light" src="img/off.gif">

    <script>
        /*
            分析：
                1.获取图片对象
                2.绑定单击事件
                3.每次点击切换图片
                    * 规则：
                        * 如果灯是开的 on,切换图片为 off
                        * 如果灯是关的 off,切换图片为 on
                    * 使用标记flag来完成

         */

        //1.获取图片对象
        var light = document.getElementById("light");

        var flag = false;//代表灯是灭的。 off图片

        //2.绑定单击事件
        light.onclick = function(){
            if(flag){//判断如果灯是开的，则灭掉
                light.src = "img/off.gif";
                flag = false;

            }else{
                //如果灯是灭的，则打开

                light.src = "img/on.gif";
                flag = true;
            }

        }

    </script>
    </body>
    </html>
     ````