2020.8.3-开头提一点对事件绑定的理解，BOM和DOM穿插学习-CSDN博客

本文链接：https://blog.csdn.net/feimeng4s/article/details/107756322

事件绑定的理解

在JS里面事件的绑定在我看来，其实就是JS里面的对象–方法属性而已只不过是把这个html里面的标签换成对象，再去调用标签里面的属性啊方法啊
如同：var girl = document.getElementById(“girl”);里面的girl就是一个标签对象了，然后操作的时候操作这个对象的属性就行了。果然面向对象，万物皆对象，不是对象也要想方设法转化为对象。

BOM和DOM穿插学习

DOM简单学习：为了满足做案例的要求

功能：控制html文档的内容，在 html DOM 中, 元素对象代表着一个 html 元素。
代码：获取页面标签对象 Element
- documenrt.getElementById(“id值”)：通过元素的id获取元素对象。
- 下面这个程序无法执行的，因为之前就已经说了，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        //通过id获取元素对象
        var girl = document.getElementById("girl");
        alert(girl);
    </script>
</head>
<body>

    <img src="img/黄霄雲.jpg" id="girl">

</body>
</html>

操作Element对象
- 设置属性值
  - 明确获取到的标签对象是哪一个
  - 查看该标签的文档，看他的属性啥的
- 修改标签体内容，下面的代码意思很清楚了
  - 属性：innerHTML,这个属性是干嘛的呢，修改标签体内容的值

<script>
    //通过id获取元素对象 获取页面标签对象Element 这里应该就是获取了这个img图片对象
    var girl = document.getElementById("girl");


    //上边已经获取了图片元素的标签对象，那么自然可以对标签体内容进行修改，所里这里终于明白了Element对象
    //控制标签的对象。我得到了这个标签后，我就可以操作这个标签的属性，这个就好比当时在标签体内部去设置属性
    //一样的道理
    alert("我要换图片");
    girl.src="img/壁纸乡村.jpeg";//就是相当于html里面的<img src="img/壁纸乡村.jpeg" >

    //alert(girl);
</script>

完整的简单dom代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>


    <img src="img/黄霄雲.jpg" id="girl">
    <h1 id="title">汇创阿里杰克马</h1>

    <script>
        //通过id获取元素对象 获取页面标签对象Element 这里应该就是获取了这个img图片对象
        var girl = document.getElementById("girl");


        //上边已经获取了图片元素的标签对象，那么自然可以对标签体内容进行修改，所里这里终于明白了Element对象
        //控制标签的对象。我得到了这个标签后，我就可以操作这个标签的属性，这个就好比当时在标签体内部去设置属性
        //一样的道理
        alert("我要换图片");
        girl.src="img/壁纸乡村.jpeg";//就是相当于html里面的<img src="img/壁纸乡村.jpeg" >

        //alert(girl);
        //innerHTML是修改标签体内容，上面的图片标签显然是没有内容的
        var title = document.getElementById("title");
        title.innerHTML="不知妻美刘强东";
    </script>

</body>
</html>

事件的简单学习

改成什么样的效果呢，改成我点击页面就会换图片，结合事件来完成

概念功能：某些组件被执行了某些操作后，触发了某些代码的执行
- 造句：xxx被xxx,我就xxx
- 所以执行点击的操作就执行换图片的行为。
如何绑定事件呢
- 直接在html标签上指定事件属性（）值，属性值就是js代码
  - 事件：onclick—单击事件，这种方式肯定是不好的：如下代码：
  - 这里提醒重要的一点，事件绑定后只要执行页面的某些操作就会触发代码执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
    <script>
        function fun( ) {
            alert("我被点了");

        }

    </script>
    <!--这里的我被点了只能用这个单引号不知道为啥  点一下就应该弹出来这句话-->
    <img src="img/黄霄雲.jpg" id="girl" onclick="fun();">
</body>
</html>

如何绑定事件方法2
- 通过js里的DOM获取元素对象，指定事件属性，设置一个函数
- 在事件绑定中，不加括号目的是引用，代表把这个函数赋值给某个变量。加了括号代表函数执行后的返回值，不带括号是把函数体所在的位置赋值给时间，就是传的是函数的地址。如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
    <img src="img/黄霄雲.jpg" id="girl" >
    <script>
        //下面的看似好像没啥问题，但是呢，实际上却运行不出来想要的效果
        function fun( ) {
            //girl.src="img/壁纸乡村.jpeg";
            alert('点我');
        }
        var girl = document.getElementById("girl");
        girl.onclick=fun;//有个要注意的地方这里的函数fun不能加括号，否则的话会改变运行结果
        //不加括号目的是引用，代表把这个函数赋值给某个变量。加了括号代表函数执行后的返回值
    </script>
    <!--这里的我被点了只能用这个单引号不知道为啥  点一下就应该弹出来这句话-->
</body>
</html>

案例：图片点击转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
    <img src="img/黄霄雲.jpg" id="girl" >
    <script>


                    
                    var girl = document.getElementById("girl");
                    var flag=false;

                    girl.onclick=function(){
                        if(flag){
                            girl.src="img/壁纸乡村.jpeg";
                            flag=false;
                        }else {
                            girl.src = "img/黄霄雲.jpg";
                            flag=true;
                        }

                    }


    </script>
    <!--这里的我被点了只能用这个单引号不知道为啥  点一下就应该弹出来这句话-->

</body>
</html>