Implementation of ready and bind events in Jquery

This article mainly gives you detailed information on Jquery's implementation of ready and bind events. If you are interested, you can refer to this section before reviewing 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. if you haven't finished writing it, 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 );

We have implemented node search. Today we are talking about binding node events.

TX, which is familiar with Jquery source code, should know that the above Code lacks the ready event, but queries nodes without considering the document object. I have discussed the differences between window. onload and document. ready separately, and extended the document. ready event.

Now we add the extension method here:

Correct the Init method:

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

This code roughly indicates that if the input parameter selector is of the function type, the ready event is executed. If it is a document, the document object will be inserted into the this. elements array (after this is passed in, it will be judged in the ready event ). If it is a escape character, the node is queried and inserted into the this. elements array cyclically. We mainly consider the writing of the $ (document). ready and $ (function () {}) ready events.

Next we will add the ready function:

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

I have mentioned this code before (the difference between onload and ready). If you don't know it, you can check it out.

Now we have implemented the ready event. Then you can register the event for the node.

To implement the bind function, the Code is as follows:

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

The Compatibility code is used to register node events. You may not know what to do with the previous each. It is now used here.

The main function is to perform operations on node loops.

Complete code:

    (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.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();            }          }        },        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 can basically register node events. Some other special effects need to be extended. If you are interested, you can add methods in the _ $. prototype object.

The above is all the content of this article, hoping to help you.