页面中js执行顺序----<script执行顺序>

最新推荐文章于 2022-10-10 20:07:05 发布

最新推荐文章于 2022-10-10 20:07:05 发布 · 541 阅读

文章标签：

#JavaScript #HTML #ViewUI

JavaScript 专栏收录该内容

44 篇文章

订阅专栏

本文通过一个实例测试了页面中JavaScript的执行顺序，展示了位于head标签内的JS、body标签内的JS及body onload事件中的JS的执行先后顺序。

页面中js的执行顺序：在页面的head标签中添加一段js代码，在页面的尾部也就是</body>之前添加一段代码，然后在body的onload事件中引用一个函数，此三者的执行顺序如何?

下面是测试的代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<head runat="server"> 
    <title>测试js的执行顺序</title> 
    <script language="javascript" type="text/javascript"> 
        var a = "这是一段在Header里面的JS代码"; 
        alert(a); 
    </script> 
</head> 
<body onload="javscript:alert('这是在body的Onload事件中的代码！');"> 
    <form id="form1" runat="server"> 
    <div> 
    <p>测试一下js的执行顺序 
    </p> 
    </div> 
    </form> 
    <script language="javascript" type="text/javascript"> 
        var a = "这是一段页面最后的JS代码"; 
        alert(a); 
    </script> 
</body> 
</html>

运行后的执行顺序如下:

执行的顺序为：head中的js,页面中的js(将此段Js放置在body标签之外亦为此顺序),body标签onload事件中的js.