javascript解释顺序

最新推荐文章于 2020-07-27 17:18:46 发布

sandy136138

最新推荐文章于 2020-07-27 17:18:46 发布

阅读量100

点赞数

文章标签： JavaScript HTML 脚本 ViewUI

javascript的解释是从上到下，用到那部分的代码就解释那部分的代码。和html同时进行解释。

如下例：
清单1

<html>
    <head>
        <title>javascript</title>

        <script type="text/javascript">                                             |
                var button1=document.getElementById("button");       |  先
                button1.onclick = function(){                                 |
                    alert("you click the button");                                     |   
                };
        </script>
    </head>
    
    <body>
        <input type="button" id="button" value="click"/>                | 后
    </body>
</html>

当执行 var button=document.getElementById("button")语句时， <input type="button" id="button" value="click"/>
中button1得不到值，button1为undefined。

清单2 解决方案

<html>
   <head>
       <title>javascript</title>
       <script type="text/javascript">
           function show(){
               var button=document.getElementById("button");     |
               button.onclick = function(){                                   | 后
                   alert("you click the button");                               |
               };
           }
       </script>
   </head>

   <body οnlοad="show();">
       <input type="button" id="button" value="click"/>             | 先
   </body>
</html>

而在清单2中因为由方法show（）包含了上述语句，所以没有进行解释，而要等html执行完后调用onload（）的方法时才解释show（）方法里面的语句。

清单3. 因为在清单2中是显式地调用body的onload事件中进行初始化，可这样做不好，应该通过下面的方法隐式调用onload的方法

<html>
   <head>
       <title>javascript</title>
       <script type="text/javascript">

           function addLoadEvent(func){                                                       （2）
               var oldonload = window.onload;
               if(typeof window.onload !='function'){
                       window.onload = func;
               }else{
                   window.onload = function(){
                   oldonload();
                   func();
                   }
               }
           }

           function show(){                                                                          （4）
                var button=document.getElementById("button");
                button.onclick = function(){
                    alert("you click the button");
                };
            }

            addLoadEvent(show);                                                                   （1）

        </script>
   </head>

   <body>
       <input type="button" id="button" value="click"/>                                （3）
   </body>
</html>

说明：body中的onload事件通过 addLoadEvent(func)方法隐式调用，上述代码的执行顺序为：（1）-> (2) -> (3) -> (4)

1.首先执行<head> 中的<script>脚本，因为（2）和（4）是方法，所以要等到被调用是才执行。
2.接着执行（1），调用 addLoadEvent(show)方法，并把方法show作为参数传过去。
3.然后调用（2），执行 addLoadEvent(func)的方法，则<script>执行完毕。
4.接着加载<body>的代码，即是（3）。当所有的html代码加载完毕后，则会调用onload的事件了。
5.因为onload的事件是使用(4)来处理的，所以运行（4）的代码，初始化button的onclick事件。
6.最好当点击button时，则会响应button的事件。

这种写法使页面的结构变得更为良好，同时使代码的灵活性更加强大的。不过，有一个缺点，如果show()有参数是。如下的写法则是错误的！addLoadEvent(show(para));
解决问题的方法时将有参函数放到一个无参函数中调用，然后再在addLoadEvent中调用无参函数。如把（1）改为addLoadEvent( function(){show(para)} );

附加说明：
以前可以要这样写：
<body οnlοad="func1(),func2(),func3()"></body>
而使用这个辅助函数，我们可以在JavaScript代码中这样写了：
addLoadEvent(func1);
addLoadEvent(func2);
addLoadEvent(func3);

同时，从这个函数中可以看出，当我们将onload 事件写在body元素上时，真正执行的其实是window对象的onload事件。因素HTMl页面中没有window标题，所以就写在body元素上了。