Jquery揭秘系列:实现 ready和bind事件
2013-12-30 15:09
337 查看
讲这一节之前,先回顾之前的一篇《小谈Jquery》里面的代码:
上面我们实现了节点的查找,今天要讲的是对节点的事件绑定。
熟悉Jquery 源码的TX应该知道:我们上面的代码少了ready事件,只是针对节点进行查询,并没有将document对象考虑进去。我之前单独讲过window.onload和 document. ready的区别,还对document.ready事件进行了扩展。
现在我们把扩展方法加到这里面:
我们的Init方法要改正一下:
这段代码的大致意思是:如果传入的参数selector是function类型,就执行ready事件。如果是document就将document对象插入到this.elements数组里面(这个传入之后,会在ready事件里面进行判断)。如果是字符窜,就查询出节点,循环插入到this.elements数组里面,没什么难度。主要考虑到$(document).ready和$(function(){})这两种ready事件的写法。
我们接下来把ready函数加进来:
View Code
这几个函数基本上可以实现对节点的事件注册了。其余的一些特效啥的,还需要扩展。如果感兴趣的话可以自己在 _$.prototype对象里面加方法。
如果有疑问或者意见的TX直接留言吧。反正大家是互相学习,互相交流。
(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函数加进来:
(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);
View Code
这几个函数基本上可以实现对节点的事件注册了。其余的一些特效啥的,还需要扩展。如果感兴趣的话可以自己在 _$.prototype对象里面加方法。
如果有疑问或者意见的TX直接留言吧。反正大家是互相学习,互相交流。
相关文章推荐
- Jquery揭秘系列:谈谈bind,one,live,delegate,on事件及实现
- Jquery揭秘系列:谈谈bind,one,live,delegate事件及实现
- 详解Jquery实现ready和bind事件
- 详解Jquery实现ready和bind事件
- jquery的ready事件的实现机制浅析
- jquery textSearch实现页面搜索 注意!!!!调用这个插件后,js事件绑定如,on、bind、live delegate全部失效,折腾了我一整天!!!
- Jquery之事件绑定(bind)实现加减乘除运算
- jQuery事件(ready/bind/hover/toggle/unbind/one/trigger/focus/blur/change/live)
- jQuery使用bind函数实现绑定多个事件的方法
- jquery实现input输入框实时输入触发事件代码 ---jQuery 中bind(),live(),delegate(),on() 区别
- Jquery揭秘系列:实现$.fn.extend 和$.extend函数
- JS中的onload事件和jQuery中的ready事件,如何用JS实现jQuery中的ready
- jquery的ready事件的实现机制浅析
- Jquery揭秘系列:ajax原生js实现详解(推荐)
- jquery的ready事件的实现机制浅析
- 实现 ready和bind事件
- jquery实现勾选复选框触发事件给input赋值
- jquery中的bind事件在手机客户端使用时遇到的问题
- jquery中取消和绑定hover事件的实现代码
- jQuery源码分析-10事件处理-Event-事件绑定与删除-bind/unbind+live/die+delegat/undelegate