ready事件是当DOM文档树加载完成后执行一个函数(不包含图片，css等)，因此它的触发要早于load事件。用法:

  • $(document).ready(fun)　　　　;fun是一个函数，这样当DOM树加载完毕后就会执行该匿名函数了

ready有一个简写，可以直接传入$(fun)即可，这是因为在jQuey内部也定义了一个$(document)的jQuery对象，和我们在上面的写法是一样的

ready事件和window的onload区别:

  • ready事件　　;等dom树载完毕后就可以执行
  • onload事件　  ;等网页中所有的资源加载完毕后(包括图片，flash,音频，视频)才能执行 　　

onload事件还可以绑定在某个图片上面，举个例子:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>

    <img src="https://www.cnblogs.com/images/logo_small.gif"  alt="">

    <script>

        $(()=>console.log('DOM树已加载完毕'))                        //ready事件

        $('img').on('load',()=>console.log('图片已加载完毕'))        //图片的加载事件

        $(window).on('load',()=>console.log('资源已加载完毕'))       //网页所有资源都加载完毕后的事件

    </script>

</body>

</html>

这里我们用了箭头函数来写，代码很简单了，我们在绑定了一个ready事件，一个图片上的onload事件和window上的onload事件，加载后输出如下:

可以看到首先是ready事件的触发，然后是图片的onload事件，最后是window的onload事件的触发，此时所有资源都已经加载完了

源码分析

jquery的ready事件就是在document上绑定了一个DOMContentLoaded事件对象，对他进行了一下封装，DOMContentLoaded事件的原理可以看看看这篇文章，介绍得挺详细的:https://www.cnblogs.com/caizhenbo/p/6679478.html

jQuery的ready事件是基于函数列表实现的，函数列表可以看这个连接:https://www.cnblogs.com/greatdesert/p/11433365.html

当我们调用$(fun)去执行一个ready事件的时候首先会执行入口模块里的逻辑，与ready相关的如下:

init: function( selector, context, rootjQuery ) {

    var match, elem, ret, doc;

    // Handle $(""), $(null), or $(undefined)

    if ( !selector ) {

        return this;

    }

    // Handle $(DOMElement)

    if ( selector.nodeType ) {

        this.context = this[0] = selector;

        this.length = 1;

        return this;

    }

    // The body element only exists once, optimize finding it

    if ( selector === "body" && !context && document.body ) {

        this.context = document;

        this[0] = document.body;

        this.selector = selector;

        this.length = 1;

        return this;

    }

    // Handle HTML strings

    if ( typeof selector === "string" ) {

        /*略*/

    } else if ( jQuery.isFunction( selector ) ) {            //如果参数selector是函数，则认为是绑定ready事件

        return rootjQuery.ready( selector );                    //则执行rootjQuery.ready()方法，并把selector作为参数传入

    }

    /*略*/

},

rootjQuery是jQuery内部定义的一个局部变量，是一个jQuery实例，如下:

rootjQuery = jQuery(document);             　　　　　　　　　　//第917行，保存了document对象引用的jQuery实例

在入口模块引用rootjQuery.ready()也就是执行了rootjQuery实例对象上的ready方法(该方法是定义在原型上的),如下:

jQuery.fn = jQuery.prototype = {

    ready: function( fn ) {

        // Attach the listeners

        jQuery.bindReady();                 //先执行jQuery.bindReady()绑定ready事件(实际上绑定的是DOMContentLoaded或onreadystatechange事件)

        // Add the callback

        readyList.add( fn );                //为函数列表readyList增加一个函数

        return this;

    }

}

jQuery.bindReady()是一个静态方法，用于绑定事件的，内部会初始化readyList为一个jQuery.Callbacks( "once memory" )函数列表对象

然后执行readyList.add( fn )将fn函数保存到函数列表readyList里面。

jQuery.bindReady()的实现如下:

jQuery.extend({

    bindReady: function() {                            //初始化ready事件监听函数列表readyList，并为document对象绑定ready事件主监听函数DOMContentLoaded

        if ( readyList ) {

            return;

        }

        readyList = jQuery.Callbacks( "once memory" );                        //调用jQuery.Callbacks(flags)ready事件监听函数列表readylist，同时传入once和memory标记。

        // Catch cases where $(document).ready() is called after the

        // browser event has already occurred.

        if ( document.readyState === "complete" ) {                            //如果文档已经就绪，则调用jQuery.ready(wait)执行ready事件监听函数列表readyList

            // Handle it asynchronously to allow scripts the opportunity to delay ready

            return setTimeout( jQuery.ready, 1 );                                //通过setTimeout()异步执行方法jQuery.ready(wait)，以允许其他脚本延迟ready事件的触发。

        }

        // Mozilla, Opera and webkit nightlies currently support this event

        if ( document.addEventListener ) {                                     //在IE9+及以上浏览器绑定DOMContentLoaded事件

            // Use the handy event callback

            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );         //把监听函数DOMContentLoaded绑定到document对象的DOMContentLoaded事件上

            // A fallback to window.onload, that will always work

            window.addEventListener( "load", jQuery.ready, false );

        // If IE event model is used

        } else if ( document.attachEvent ) {

            // ensure firing before onload,

            // maybe late but safe also for iframes

            document.attachEvent( "onreadystatechange", DOMContentLoaded );

            // A fallback to window.onload, that will always work

            window.attachEvent( "onload", jQuery.ready );

            // If IE and not a frame

            // continually check to see if the document is ready

            var toplevel = false;

            try {

                toplevel = window.frameElement == null;

            } catch(e) {}

            if ( document.documentElement.doScroll && toplevel ) {

                doScrollCheck();

            }

        }

    },

    /*略*/

})

这里我们调用document.addEventListener在document上绑定了一个DOMContentLoaded事件，这样当DOM树加载完后就会执行DOMContentLoaded函数了，DOMContentLoaded函数的定义如下:

if ( document.addEventListener ) {         //如果是IE9+和其他浏览器

    DOMContentLoaded = function() {

        document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );    //先移除document的DOMContentLoaded事件

        jQuery.ready();                                                                    //再调用jQuery.ready()执行ready事件监听函数

    };

} else if ( document.attachEvent ) {

    DOMContentLoaded = function() {

        // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).

        if ( document.readyState === "complete" ) {

            document.detachEvent( "onreadystatechange", DOMContentLoaded );

            jQuery.ready();

        }

    };

}

函数内首先会移除DOMContentLoaded事件，然后调用jQuery.ready()事件，这是DOM树触发后的事件了(我们在jQuery.fn.ready()内执行了readyList.add( fn )增加的函数都会依次触发)，如下:

jQuery.extend({

    isReady: false,

    ready: function( wait ) {                        //实际执行的函数  触发ready事件监听函数列表readyList和数据缓存对象中的ready事件监听函数。

        // Either a released hold or an DOMready/load event and not yet ready

        if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) {    //如果wait是true且jQuery.readyWait等于0 或者 wait不是true且jQuery.isReady是false 则执行 初始化jQuery.isReady为false的

            // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).

            if ( !document.body ) {

                return setTimeout( jQuery.ready, 1 );

            }

            // Remember that the DOM is ready

            jQuery.isReady = true;                                        //设置jQuery.inReady为true,表示ready事件已就绪。

            // If a normal DOM Ready event fired, decrement, and wait if need be

            if ( wait !== true && --jQuery.readyWait > 0 ) {

                return;

            }

            // If there are functions bound, to execute

            readyList.fireWith( document, [ jQuery ] );                 //执行ready事件监听函数readyList,上下文是document(即关键词this)，[jQuery]是ready事件监听函数的参数。

            // Trigger any bound ready events

            if ( jQuery.fn.trigger ) {

                jQuery( document ).trigger( "ready" ).off( "ready" );

            }

        }

    },

    /*略*/

})

writer by:大沙漠 QQ:22969969

最后调用readyList.fireWith()方法去触发回掉函数列表里的每个函数。

jQuery 源码分析(十八) ready事件详解的更多相关文章

  1. jQuery 源码分析(十一) 队列模块 Queue详解

    队列是常用的数据结构之一,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行插入操作(入队).特点是先进先出,最先插入的元素最先被删除. 在jQuery内部,队列模块为动画模块提供基 ...

  2. mybatis 源码分析（八）ResultSetHandler 详解

    本篇博客就是 myabtis 系列的最后一篇了,还剩 ResultSetHandler 没有分析:作为整个 mybatis 最复杂最繁琐的部分,我不打算按步骤一次详解,因为里面的主要内容就是围绕 re ...

  3. netty源码分析(十八)Netty底层架构系统总结与应用实践

    一个EventLoopGroup当中会包含一个或多个EventLoop. 一个EventLoop在它的整个生命周期当中都只会与唯一一个Thread进行绑定. 所有由EventLoop所处理的各种I/O ...

  4. jQuery 源码分析(十六) 事件系统模块 底层方法 详解

    jQuery事件系统并没有将事件监听函数直接绑定到DOM元素上,而是基于数据缓存模块来管理监听函数的,事件模块代码有点多,我把它分为了三个部分:分底层方法.实例方法和便捷方法.ready事件来讲,好理 ...

  5. jQuery 源码分析(十) 数据缓存模块 data详解

    jQuery的数据缓存模块以一种安全的方式为DOM元素附加任意类型的数据,避免了在JavaScript对象和DOM元素之间出现循环引用,以及由此而导致的内存泄漏. 数据缓存模块为DOM元素和JavaS ...

  6. jQuery 源码分析(十二) 数据操作模块 html特性 详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第1个部分:HTML特性部分,html特性部分是对原生方法getAttribute()和setAttribute()的封装,用于修改DOM元素的特性 ...

  7. jQuery 源码分析(十九) DOM遍历模块详解

    jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装 ...

  8. jQuery 源码分析(十五) 数据操作模块 val详解

    jQuery的属性操作模块总共有4个部分,本篇说一下最后一个部分:val值的操作,也是属性操作里最简单的吧,只有一个API,如下: val(vlaue)        ;获取匹配元素集合中第一个元素的 ...

  9. jQuery 源码分析(十四) 数据操作模块 类样式操作 详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第3个部分:类样式操作部分,用于修改DOM元素的class特性的,对于类样式操作来说,jQuery并没有定义静态方法,而只定义了实例方法,如下: a ...

随机推荐

  1. [日常] linux设置环境变量

    比如首先在/etc/profile里面增加这几个环境变量 export PATH=$PATH:/mnt/f/ubuntu/goProject/go/binexport GOROOT=/mnt/f/ub ...

  2. Fail-fast

    实际上,java.util.Iterator 的大多数实现都提供了故障快速修复(Fail-fast)的机制 ⎯⎯在利用迭代器遍历某一容器的过程中,一旦发现该容器的内容有所改变,迭代器就会抛出 Conc ...

  3. 一些你不知道的js特性【一】

    关于js 我们知道完整的js包括三个方面ECMAScript.DOM(文档对象模型).BOM(浏览器对象模型). ECMAScript定义了与宿主无关的预言基础,比如:语法(包含正则语法).类型.语句 ...

  4. opencv---(腐蚀、膨胀、边缘检测、轮廓检索、凸包、多边形拟合)

    一.腐蚀(Erode) 取符合模板的点, 用区域最小值代替中心位置值(锚点) 作用: 平滑对象边缘.弱化对象之间的连接. opencv 中相关函数:(erode) // C++ /** shape: ...

  5. idea实战技巧

    一.背景 为什么想写这个,因为编码一线更多的是实战,实战中,可能一个快捷键,一个小技巧,就能省很多时间. 本文会持续记录,持续更新. 二.技巧 1.全局替换(带正则) 场景是: 多profile的情况 ...

  6. Linux系统：Centos7下搭建ClickHouse列式存储数据库

    本文源码:GitHub·点这里 || GitEE·点这里 一.ClickHouse简介 1.基础简介 Yandex开源的数据分析的数据库,名字叫做ClickHouse,适合流式或批次入库的时序数据.C ...

  7. window.innerHeight和document.documentElement.clientHeight区别

    今天有人问我这个问题,做了个小例子来记录一下子. 首先这两个都是获取可视区域的高度,那他们有什么区别呢 1.window.innerHeight属于BOM(浏览器对象模型),而document.doc ...

  8. JVM内存模型与类加载机制

    一. java虚拟机的内存模型如图: 补习一下jvm内存模型中的各个组成部分 堆: 我们new出来的对象全部放在堆中,他是jvm所能够动态分配的最大的一块空间 优点: 内存动态分配,生命周期不必事先告 ...

  9. Jupyter Notebook 使用小记

    简介 Jupyter Notebook 是一款几乎综合所有编程语言,能够把软件代码.计算输出.解释文档.多媒体资源整合在一起的多功能科学计算平台.具有如下优点: 整合所有资源 交互性编程体验 零成本重 ...

  10. 松软科技web课堂:SQLServer之HAVING 子句

    HAVING 子句 在 SQL 中增加 HAVING 子句原因是,WHERE 关键字无法与合计函数一起使用. SQL HAVING 语法 SELECT column_name, aggregate_f ...