实例谈谈Js语句放在head和body的区别

最新推荐文章于 2023-04-19 22:06:00 发布

行者雪.

最新推荐文章于 2023-04-19 22:06:00 发布

阅读量469

点赞数

本文链接：https://blog.csdn.net/xuekunshan_/article/details/80664804

版权

简单描述：

在HTML body部分中的Js会在页面加载的时候被执行。

在HTML head部分中的Js会在被调用的时候才执行。

区别：

在head中的Js，只加载不执行。只有事件触发的情况下才执行。

在body中的Js,在加载的事件就开始执行了。无需事件触发和调用

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset ="utf-8">
    <title>Js</title>
    <script>
        function showDate(){
            document.getElementById('demo').innerHTML = Date();
        }

        function changeText(id){
            id.innerHTML = 'August';
        }
    </script>
</head>
<body>
    <h1 onclick ="changeText(this)">July</h1><!--事件触发,所以其对应的Js语句放在head中-->

    <button onclick ="showDate()">现在的时间是?</button><!--事件触发，所以其对应的Js语句放在head中-->

    <button id ="myBtn">Septemper</button><!--这不是事件触发,所有其对应的Js语句放在body中-->

    <script>
        document.getElementById("myBtn").onclick = function(){changeMonth()};
        function changeMonth(){
            document.getElementById('demo').innerHTML = 'October';
        }
    </script>

    <p id ="demo"></p>

</body>
</html>

注：

也可以把事件触发对应的Js语句放在body中，但是不能把没有事件触发的Js语句
在head中。由于浏览器是按顺序解析html，所以无事件触发的Js在body的语句应放在你想要执行
语句的后面。

如下文：将无事件触发的Js语句放在button上面也会出现问题。由于浏览器按顺序解析，先会解析button上面的Js语句（显然此时浏览器布知道MyBtn是什么，所以不会做出反应）,然后再解析button的id。

<!DOCTYPE html>
<html>
<head>
    <meta charset ="utf-8">
    <title>Js</title>
</head>
<body>
    <script>
        document.getElementById("myBtn").onclick = function(){changeMonth()};
        function changeMonth(){
            document.getElementById('demo').innerHTML = 'October';
        }
    </script>
    < button id = "myBtn" > Septemper < / button >

    <p id ="demo"></p>
</body>
</html>

行者雪.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
实例谈谈Js语句放在head和body的区别

简单描述：在HTML body部分中的Js会在页面加载的时候被执行。在HTML head部分中的Js会在被调用的时候才执行。区别：在head中的Js，只加载不执行。只有事件触发的情况下才执行。在body中的Js,在加载的事件就开始执行了。无需事件触发和调用实例：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta char...
复制链接

扫一扫