Jquery揭秘系列:实现 ready和bind事件

 

讲这一节之前,先回顾之前的一篇《小谈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应该知道:我们上面的代码少了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对象里面加方法。

如果有疑问或者意见的TX直接留言吧。反正大家是互相学习,互相交流。

 
 
分类: JS/JQUERY

实现 ready和bind事件的更多相关文章

  1. Jquery揭秘系列:实现 ready和bind事件

    讲这一节之前,先回顾之前的一篇<小谈Jquery>里面的代码: (function (win) { var _$ = function (selector, context) { retu ...

  2. jQuery中ready与load事件

    jQuery中ready与load事件(来自慕课网) jQuery有3种针对文档加载的方法 $(document).ready(function() { // ...代码... }) //docume ...

  3. jQuery学习一:jQuery中的ready和load事件

    //ready事件 $(document).ready(function(){ 代码........ }); //ready事件简写: $(function(){ 代码........ }); //l ...

  4. js的onclick和jquery的bind事件执行先后顺序

    近期在项目中为每一个ajax触发按钮写正在加载的效果,用的是bootstarp 代码如下 $(function(){ $('.btn').bind('click',function(e){ var $ ...

  5. [jQuery]on和bind事件绑定的区别

    on和bind事件绑定的区别 一个demo展示 <!DOCTYPE html> <html lang="zh"> <head> <titl ...

  6. JQuery 的Bind()事件

    刚开始我们先看一下它的定义: .bind( eventType [, eventData], handler(eventObject)) .Bind()方法的主要功能是在向它绑定的对象上面提供一些事件 ...

  7. GUI tkinter (bind)事件篇

    """事件:1.我们的很多操作,比如我们点击了一下鼠标,这就是一 个事件,而操作系统会根据我们的相应的事件产生相应的消息, 操作系统把消息传递给我们的应用程序,然后我们的 ...

  8. TKinter当Label绑定bind事件时传参方法

    记录下tkinter的 当在label绑定bind事件时,遇到需要传参时的解决方法(因为有event存在 所以不能直接传参) https://www.cnblogs.com/liyuanhong/ar ...

  9. jquery事件三 -- load(), ready(), resize()以及bind()事件

    例子1 ready() DOM加载完毕 load() 元素加载完毕 resize() 浏览器窗口的大小发生变化 <!DOCTYPE html> <html lang="en ...

随机推荐

  1. HDU 1877 另一个版本 A+B

    另一个版本 A+B Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  2. bigdata_hiveserver2报错_thrift

    问题一: php客户端,链接hiveserver2 ,报错 如下 1: server.TThreadPoolServer (TThreadPoolServer.java:run(215)) - Err ...

  3. UVA 11426 - GCD - Extreme (II) (数论)

    UVA 11426 - GCD - Extreme (II) 题目链接 题意:给定N.求∑i<=ni=1∑j<nj=1gcd(i,j)的值. 思路:lrj白书上的例题,设f(n) = gc ...

  4. IntelliJ IDEA 开发scala

    1.下载安装IntelliJ IDEA,并安装scala插件 我下载的是linux的13版本,linux版本是绿色版本,有一个启动的脚本,运行就可以了,也可以在linux建立快捷方式.windows的 ...

  5. Appium在手机浏览器使用滑屏Not yet implemented解决办法。

    在手机浏览器使用swipe.scroll等手机特有行为时,因为默认context是WEBVIEW,所有一定要切换回NATIVE_APP才可以使用. python: driver.switch_to.c ...

  6. CSharp设计模式读书笔记(18):中介者模式(学习难度:★★★☆☆,使用频率:★★☆☆☆)

    中介者模式(Mediator Pattern):用一个中介对象(中介者)来封装一系列的对象交互,中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互,中介者模式又称为 ...

  7. 【Espruino】NO.15 nRF24L01+无线收发器

    http://blog.csdn.net/qwert1213131/article/details/35853747 本文属于个人理解,能力有限,纰漏在所难免,还望指正! [小鱼有点电] [Espru ...

  8. Windows系统下Redis的安装

    Redis是一个用的比较广泛的Key/Value的内存数据库,新浪微博.Github.StackOverflow 等大型应用中都用其作为缓存,Redis的官网为http://redis.io/. 最近 ...

  9. cfs

    转自:http://www.cnblogs.com/openix/p/3254394.html 下文中对于红黑树或链表组织的就绪队列,统称为用队列组织的就绪队列.                    ...

  10. C# - object有哪些基本方法类有

    Name Description Equals(Object) Determines whether the specified object is equal to the current obje ...