jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别

       $().ready()、$(handler)、$(document).ready(handler)均不是原生JS中的,都是jQuery中封装的方法。这些事件在当页面的dom节点加载完毕后就执行,无需等待页面中的图片等加载完成。DomContentLoaded是原生的表示在Dom节点加载完毕之后就执行该事件。

     window.onload()以及body中的onload()两者都表示当页面加载元素(包括图片等信息)完毕后执行的操作,是原始JS中就有的。同时window.onload只能注册一个事件处理函数,和原生JS通过属性注册事件的原理(详情见博客)是一样的,后面注册的会覆盖前面的 ,在IE10和火狐中window.onload和body.onload是一样的,所以在后面的会覆盖前面的,但是在chrome中则两者不一样注册的事件均会被执行。

  a、当JS代码在head中时且window.onload()中方法是匿名时:将会跳过window中的方法。

      <html>   

      <head>   

       <script type="text/javascript"> alert('a');  

       window.onload=function () {  

       alert('b');  

         } ;

      alert('c');

      </script>   

    </head>   

   <body onload="alert('d');">  

   </body>   

   </html>  

 上面的代码在IE10以及火狐中执行的结果是:a,c,d,在谷歌中的结果为:a、c,b,d

 

 b、当JS代码在body

       <html>   

      <head>   

      </head>     

      <body onload="alert('a');">  

      <script type="text/javascript"> alert('b');  

     window.onload=fn;

     function fn () {  

    alert('c');  

    } ;

    alert('d');  

    </script>  

   </body>   

   </html>

  谷歌火狐等的执行结果为:b,d,c

注意在给window.onload赋值的时候是赋值的方法名或者匿名函数而不是方法,否则直接执行函数,结果不是预期的效果

posted @ 2016-05-09 18:53  heshan珊  Views(1462)  Comments(0Edit  收藏  举报