45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:怎么样在Jquery中实现ready和bind事件?

怎么样在Jquery中实现ready和bind事件?

2016-05-11 13:57:59 来源:www.45fan.com 【

怎么样在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();
      }
     }
    }

这段代码我之前其实讲过了(onload和ready的区别),不知道的可以看看。

现在ready事件,我们实现了。然后就可以针对节点进行事件注册了。

我们来实现bind函数,代码如下:

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

    }

这里面都是些兼容性代码,实现节点的事件注册。之前的each,大家可能不知道是要干嘛的。现在在这里面就用到了。

主要作用是针对节点循环做一些操作。

完整代码,来一份:

  (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对象里面加方法。

以上就是本文的全部内容,希望能够帮助大家。


本文地址:http://www.45fan.com/bcdm/49196.html
Tags: 实现 详解 jquery
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部