详解Jquery实现ready和bind事件

讲这一节之前，先回顾之前一段代码：

  (function (win) {      var _$ = function (selector, context) {        return new _$.prototype.Init(selector, context);      }      _$.prototype = {        Init: function (selector, context) {          this.elements = [];          var context = context || document;          if (context.querySelectorAll) {            var arr = context.querySelectorAll(selector);            for (var i = 0; i < arr.length; i++) {              this.elements.push(arr[i]);            }          }          ////这一块是选择器的实现,没有写完，可以自己实现        },        each: function (callback) {          if (this.elements.length > 0) {            for (var i = 0; i < this.elements.length; i++) {              callback.call(this, i, this.elements[i]);            }          }        }      }      _$.prototype.Init.prototype = _$.prototype;      window.$ = _$;    })(window || global);

上面我们实现了节点的查找，今天要讲的是对节点的事件绑定。

熟悉Jquery 源码的TX应该知道：我们上面的代码少了ready事件，只是针对节点进行查询，并没有将document对象考虑进去。我之前单独讲过window.onload和 document. ready的区别，还对document.ready事件进行了扩展。

现在我们把扩展方法加到这里面：

我们的Init方法要改正一下：

 Init: function (selector, context) {          this.elements = [];          if (typeof selector === "function") {            this.elements.push(document);            this.ready(selector);          }          else {            var context = context || document;            var isDocument = function (ele) {              var tostring = Object.prototype.toString;              return tostring.call(ele) == "[object HTMLDocument]" || "[object Document]";            }            if (isDocument(selector)) {              this.elements.push(selector);            }            else if (context.querySelectorAll) {              var arr = context.querySelectorAll(selector);              for (var i = 0; i < arr.length; i++) {                this.elements.push(arr[i]);              }            }          }        }

这段代码的大致意思是：如果传入的参数selector是function类型,就执行ready事件。如果是document就将document对象插入到this.elements数组里面(这个传入之后，会在ready事件里面进行判断)。如果是字符窜，就查询出节点，循环插入到this.elements数组里面，没什么难度。主要考虑到$(document).ready和$(function(){})这两种ready事件的写法。

我们接下来把ready函数加进来：

  ready: function (callback) {          var isDocument = function (ele) {            var tostring = Object.prototype.toString;            return tostring.call(ele) == "[object HTMLDocument]" | "[object Document]";          }          if (isDocument(this.elements[0])) {            if (document.addEventListener) {              document.addEventListener('DOMContentLoaded', function () {                document.removeEventListener('DOMContentLoaded', arguments.callee, false);                callback();              }, false);            }            else if (document.attachEvent) {              document.attachEvent('onreadystatechange', function () {                if (document.readyState == "complete") {                  document.detachEvent('onreadystatechange', arguments.callee);                  callback();                }              });            }            else if (document.lastChild == document.body) {              callback();            }          }        }