P10 提取行间事件

1、第一个要说明的就是，在我们编写的代码中，一定要实现【行为】、【样式】、【结构】三者的分离

怎么才能实现呢？

这里我们就要用到window属性的onload事件了

通过在<script>标签中添加window.onload = function(){ // 此处编写JS代码}

来实现将行为代码写在head中也能正常执行的效果

如果没有window.onload事件，下面的代码是不能正常执行的，控制台会提示错误信息。

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            btn1.onclick = function (){ 
                alert('JS中匿名函数的应用')
            }
        }
    </script>
</head>
<body>
    <input id="btn1" type="button" value="按钮">
</body>
</html>

2、提取行间事件

说明：

提取行间事件的本质上就是在标签的行间添加属性，例如之前的改变按钮的值

可以看到同样的代码写在body中是没有任何问题的，但是写在head中就不能执行了，原因就在于HTML页面的执行顺序是从上到下，下面的body还没有加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!--     <script>
        var obtn1 = document.getElementById('btn1');
        var btn = document.getElementById('btn');
        btn.onclick = function (){
            var oBtn1 = document.getElementById('btn1');
            alert('改变按钮的值为bbb')
            oBtn1.value = 'bbb';
        }

    </script> -->
</head>
<body>
    <!-- // 通过提取行间事件来修改标签的属性的值 -->
    <input type="button" value="按钮" id="btn1">
    <input id="btn" type="button" value="nihao">
    
    <script>
        var obtn1 = document.getElementById('btn1');
        var btn = document.getElementById('btn');
        btn.onclick = function (){
            var oBtn1 = document.getElementById('btn1');
            alert('改变按钮的值为bbb')
            oBtn1.value = 'bbb';
        }

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

当使用了上面的window.onload以后，写在head中的代码就可以正常执行了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var obtn1 = document.getElementById('btn1');
            var btn = document.getElementById('btn');
            btn.onclick = function (){
                var oBtn1 = document.getElementById('btn1');
                alert('改变按钮的值为bbb')
                oBtn1.value = 'bbb';
            }
        }

    </script>
</head>
<body>
    <!-- // 通过提取行间事件来修改标签的属性的值 -->
    <input type="button" value="按钮" id="btn1">
    <input id="btn" type="button" value="nihao">

    <!-- <script>
        var obtn1 = document.getElementById('btn1');
        var btn = document.getElementById('btn');
        btn.onclick = function (){
            var oBtn1 = document.getElementById('btn1');
            alert('改变按钮的值为bbb')
            oBtn1.value = 'bbb';
        }

    </script> -->
</body>
</html>

下面的代码也是一种提取行间事件的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div id="div1" class="liuyonglin"></div>
    <script>
        var oDiv = document.getElementById('div1');
        oDiv.className = 'suwenyuan';
    </script>
</body>
</html>

在控制台可以看到div标签的class属性的值变成了"suwenyuan"