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

  • 相关阅读:
    Linux常见问题解决
    使用npm国内镜像
    常用CSS备忘
    如何把JavaScript数组中指定的一个元素移动到第一位
    教你如何将word中的表格完美粘贴到ppt中
    测试开发之路--一个小小工程师的回首
    一篇文章读完50篇摄影教程(托马斯的2016总结)
    李开复推荐的30本创业/管理/互联网必须看的电子书
    摩拜单车深度产品体验报告
    Word2016(2013)怎么从任意页插入起始页码
  • 原文地址:https://www.cnblogs.com/heshan1992/p/5475045.html
Copyright © 2011-2022 走看看