Detailed jquery implementation of ready and bind events _jquery

Before talking about this section, review the previous code:

  (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]);
            }
          This is the implementation of the selector, not finished, you can implement it yourself
        },
        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);

The above we implemented the node lookup, today is about the node of the event binding.

Familiar with the jquery source of TX should know: Our code above the Ready event, only for the node query, and did not take the document object into account. I have spoken window.onload and document alone before. The difference between the ready and the Document.ready event is also extended.

Now we add the extension method here:

Our Init method has to be corrected:

 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)); }
            }
          }
        }

The general meaning of this code is that if the incoming parameter selector is a function type, the Ready event is executed. If it is document, insert the Document object into the This.elements array (the incoming one will be judged in the Ready event). If it is a character channeling, query the node, looping into the this.elements array, no difficulty. The main consideration is given to the writing of the two ready events, $ (document). Ready and $ (function () {}).

We next add the Ready function:

  Ready:function (callback) {var isdocument = function (ele) {var tostring = Object.prototype.to
            String; Return Tostring.call (ele) = = "[Object HTMLDocument]" |
          "[Object Document]"; } if (Isdocument (This.elements[0])) {if (Document.addeventlistener) {Document.addeve Ntlistener (' domcontentloaded ', function () {Document.removeeventlistener (' domcontentloaded ', arguments.ca
                Llee, false);
              Callback ();
            }, False);
                else if (document.attachevent) {document.attachevent (' onreadystatechange '), function () { if (document.readystate = = "complete") {document.detachevent (' onreadystatechange '), argument
                  S.callee);
                Callback ();
            }
              });
            else if (Document.lastchild = = document.body) {callback ();
  }
          }      } 

This piece of code I have actually said before (onload and ready difference), do not know can see.

Now ready events, we have achieved. You can then register the event for the node.

Let's implement the BIND function with the following code:

 Bind:function (Type, callback) {
          if (document.addeventlistener) {
            This.each (function (i, item)
              { Item.addeventlistener (Type, callback, false);}
          else if (document.attachevent) {
            This.each (function (i, item) {
              item.attachevent (' on ' + type, callback);
            });
          }
          else {
            This.each (function (i, item) {
              tem[' on ' + type] = callback;
            });
          }

        

Here are some compatibility code, the implementation of node event registration. Before each, you may not know what to do. Now it's in here.

The main role is to do some action on the node loop.

Complete code, here's a copy:

    (function (Win) {var _$ = function (selector, context) {return new _$.prototype.
      Init (selector, context);
          } _$.prototype = {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));
  }
            }
          }
        },      Each:function (callback) {var length = This.elements.length; if (length > 0) {for (var i = 0; i < length; i++) {Callback.call (this, I, this.elements[
            I]); }}, 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.addeve Ntlistener (' domcontentloaded ', function () {Document.removeeventlistener (' domcontentloaded ', arguments.ca
                Llee, 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 ();
            }}, Bind:function (type, callback) {if (Document.addeventlistener) {
            This.each (function (i, item) {Item.addeventlistener (type, callback, false);
          }); else if (document.attachevent) {This.each (function (i, item) {Item.attachevent (' on
            ' + type, callback);
          });
            else {This.each (function (i, item) {tem[' on ' + type] = callback;
          }); }} _$.prototype.
      Init.prototype = _$.prototype;
    window.$ = _$;
 }) (window);

These functions basically allow you to register the event for a node. Some of the other special effects need to be extended. If you are interested, you can add a method to your _$.prototype object.

The above is the entire content of this article, hope to be able to help everybody.