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

  • 相关阅读:
    3.6 符号表的应用
    将博客搬至CSDN
    webpack打包vue项目IE报错,“对象不支持“use”属性或方法”
    移动端解决input被输入法挡住的问题
    javascript中对象的深复制的几种方法
    如何随机洗牌一个数组
    setInterval中this指向的问题
    css中的各种常见布局写法
    vue设置全局变量或函数
    【nodejs爬虫】使用async控制并发写一个小说爬虫
  • 原文地址:https://www.cnblogs.com/heshan1992/p/5475045.html
Copyright © 2011-2022 走看看