Jquery의 준비 및 바인딩 events_jquery 구현에 대한 자세한 설명

이 섹션에 대해 이야기하기 전에 이전 코드를 검토해 보겠습니다.

  (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는 다음을 알아야 합니다. 위의 코드에는 준비된 이벤트가 없으며 문서 객체를 고려하지 않고 노드만 쿼리합니다. 이전에 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]);
              }
            }
          }
        }

이 코드의 일반적인 의미는 전달된 매개변수 선택기가 함수 유형인 경우 준비 이벤트를 실행한다는 것입니다. 문서인 경우 문서 객체를 this.elements 배열에 삽입합니다(이를 전달한 후 준비 이벤트에서 판단합니다). 문자 이동인 경우 노드를 쿼리하여 루프의 this.elements 배열에 삽입하면 됩니다. 두 가지 준비 이벤트인 $(document).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();
            }
          }
        }

이 코드에 대해서는 실제로 이전에 설명한 적이 있습니다(onload와 Ready의 차이점). 모르신다면 한 번 살펴보세요.

이제 준비 이벤트를 구현했습니다. 그런 다음 노드에 대한 이벤트를 등록할 수 있습니다.

바인드 기능을 구현해 보겠습니다. 코드는 다음과 같습니다.

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

        }

다음은 노드 이벤트 등록을 구현하기 위한 몇 가지 호환성 코드입니다. 각각 전에는 그것이 무엇인지 모를 수도 있습니다. 지금 여기에 사용됩니다.

주요 기능은 노드 루프에서 일부 작업을 수행하는 것입니다.

전체 코드는 여기로 오세요:

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

이러한 함수는 기본적으로 노드에 대한 이벤트 등록을 구현할 수 있습니다. 나머지 특수 효과 중 일부는 아직 확장이 필요합니다. 관심이 있는 경우 _$.prototype 개체에 직접 메서드를 추가할 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들께 도움이 되었으면 좋겠습니다.