zoukankan      html  css  js  c++  java
  • 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赋值的时候是赋值的方法名或者匿名函数而不是方法,否则直接执行函数,结果不是预期的效果

  • 相关阅读:
    HDU 1348 Wall
    HDU 2202 最大三角形
    HDU 2215 Maple trees
    HDU 1147 Pick-up sticks
    HDU 1392 Surround the Trees
    风语时光
    HDU 1115 Lifting the Stone
    HDU 1086 You can Solve a Geometry Problem too
    HDU 2108 Shape of HDU
    HDU 3360 National Treasures
  • 原文地址:https://www.cnblogs.com/heshan1992/p/5475045.html
Copyright © 2011-2022 走看看