讲这一节之前,先回顾之前的一篇《小谈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直接留言吧。反正大家是互相学习,互相交流。

Jquery揭秘系列:实现 ready和bind事件的更多相关文章

  1. 实现 ready和bind事件

    Jquery揭秘系列:实现 ready和bind事件   讲这一节之前,先回顾之前的一篇<小谈Jquery>里面的代码: (function (win) { var _$ = functi ...

  2. Jquery揭秘系列:Validation实现

    之前讲了一部分揭秘系列的东西,由于年初的时候在改项目,也没有写下去.现在开始闲下来了,会继续写没写完的东西,各种原生js实现Jquery的功能. 转入正题,说一下今天要讲的东西. 相信很多tx在项目里 ...

  3. Jquery揭秘系列:谈谈bind,one,live,delegate事件及实现

    在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate等等. 我们先看看他们的定义,直接进入主题: bind( )方法用于将一个处理程 ...

  4. Jquery揭秘系列:谈谈bind,one,live,delegate,on事件及实现

    在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate,on等等. on() jQuery事件绑定.on()简要概述及应用 看源码发现 ...

  5. [jQuery学习系列四 ]4-Jquery学习四-事件操作

    前言:今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席 云集 听道 推酷 青年中国说 SELF格致论道 参考:http://www.365 ...

  6. Jquery揭秘系列:实现$.fn.extend 和$.extend函数

    前面我们扩展了bind方法和ready函数,这次我要讲一下$.fn.extend 和$.extend函数. 其他的不多说,直接切入主题吧! 先来看看这两个函数的区别: $.fn.extend是为查询的 ...

  7. 原 jQuery中document的ready和load事件的区别?

    概述: 大家在工作中用jQuery的时候一定会在使用之前这样:   1 2 3 4 5 6 7 8 //document ready $(document).ready(function(){     ...

  8. jQuery原理系列-Dom Ready

    ready事件是jquery的一个很重要的功能,在很久很久以前,我们是使用window.onload监听页面加载成功的,onload事件的好处是你不用考虑浏览器兼容性,也不需要依赖任何框架就可以写,但 ...

  9. Jquery揭秘系列:ajax原生js实现

    讲到ajax这个东西,我们要知道两个对象XMLHTTPRequest和ActiveXObject ,提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求 ...

随机推荐

  1. VS2010中整理代码快捷键

    快捷键:Ctrl+A Ctrl+K Ctrl+F的三个的组合2015-11-08

  2. iOS之ShareSDK实现分享、第三方登录等功能

    (1)官方下载ShareSDK iOS 2.8.8,地址:http://sharesdk.cn/ (2)根据实际情况,引入相关的库,参考官方文档. (3)在项目的AppDelegate中一般情况下有三 ...

  3. iOS项目groups和folder的区别(组和文件夹)

    在引用一个第三方框架的时候,已经拖进去了,但是引用框架里面的文件时,竟然报错说找不到.......查了一下,原来在拖进去时没有注意group和folder的选择! 其实仔细观察一下,不难发现,以gro ...

  4. UIweib的简单实用

  5. java数组的常用函数

    import java.util.*; class 数组索引{ public static void main(String args[]){ //数组中的使用工具:Arrays int[] arr ...

  6. cglib动态代理

    代理即为访问对象添加一层控制层,使其间接化,控制层可以为对象访问添加操作属性. cglib:Code Generation library, 基于ASM(java字节码操作码)的高性能代码生成包 被许 ...

  7. Yii2 使用a标签发送post请求

    <?= Html::a('text', 'url', [ 'data' => [ 'method' => 'post', 'params' => [ 'params_key' ...

  8. HTML基本组成结构与标签的认识

    HTML基本组成结构与标签 其实组成结构用一张图来简单了解下如下 目前一般网站的结构是会如此不是很清晰简单 先来说说header头部 这样是不是更加清楚了 导航栏是引导用户查看网站内容的快捷入口,打个 ...

  9. 使用 expect 命令执行自动分发系统

    一.命令 except 实例详解 1. 介绍 expect 使用场景 expect可以让我们实现自动登录远程机器,并且可以实现自动远程执行命令.当然若是使用不带密码的密钥验证同样可以实现自动登录和自动 ...

  10. ERROR! MySQL is running but PID file could not be found

    /etc/init.d/mysql status提示ERROR! MySQL is running but PID file could not be found先打印MYSQL进程ps aux | ...