jQuery早期的事件系统,主要借鉴自Dean-Edward的事件模型。虽说早期的该事件模型也有些许bug,诸如:

  1,绑定的事件及其处理程序等数据并未存储到缓存中,而是直接存储在dom元素上,这样不仅污染了dom元素,而且还有可能造成隐患,比如在早期的ie下

  拷贝元素,顺带着连这些数据都拷贝了,有可能发生交错引用进而引起内存泄露;

  2,对待所有浏览器一视同仁,不论ie系还是现代浏览器,都统一采用 on+type的dom0级事件处理,这样失去了现代浏览器对事件冒泡或者捕获的控制,丧

  失了灵活性。

但是DE事件模型,的确解决了浏览器的兼容问题,特别是IE下attachEvent绑定事件处理函数,在执行回调函数时无序执行的问题,也解决了在回调函数中this指向

的问题,顺带着对event参数做了简单的修补,这种无侵入式的模型在当时都是首屈一指的。

现在自己贴出根据DE模型,自己修改后的事件系统:

addEvent.guid = 1;
addEvent.events = {}; //简单缓存系统
function addEvent(el,type,fn){
if(!fn.$$guid){
fn.$$guid = addEvent.guid++;
}
if(!el.$$guid){
el.$$guid = addEvent.guid++;
}
if(!addEvent.events[el.$$guid]){
addEvent.events[el.$$guid] = {};
}
var fns = addEvent.events[el.$$guid][type];
if(!fns){
fns = addEvent.events[el.$$guid][type] = {};
// 若在html行内绑定事件,则首先执行
if(el['on'+type]){
fns[0] = el['on'+type];
}
}
fns[fn.$$guid] = fn;
el['on'+type] = handleEvent;
} function deleteEvent(el,type,fn){
if(fn.$$guid in addEvent.events[el.$$guid][type]){
delete addEvent.events[el.$$guid][type][fn.$$guid];
}
} function handleEvent(event){
// 修正跨iframe获取不到event的bug
event = event || fixEvent(((this.ownerDocument || document || this).parentWindow || window).event);
var type = event.type,returnValue = true,
handlers = addEvent.events[this.$$guid][type];
for(var i in handlers){
if(handlers[i].call(this,event) === false){
returnValue = false;
}
}
return returnValue;
} function fixEvent(event) { event.preventDefault = function(){return event.returnValue = false;};
event.stopPropagation = function(){return event.cancelBubble = true;};
return event;
}

Dean-Edward的事件系统实现的更多相关文章

  1. js便签笔记(5)——Dean Edwards大牛的跨浏览器AddEvent()设计(不知道是不是jQuery事件系统的原型)

    1. 前言: 在看Aaron的jquery源码解读时候,看到事件系统那块,作者提到了Dean Edwards的添加事件的设计,于是就点进去看了看.首先让我吃惊的是,代码非常少,寥寥几十行,非常简单.于 ...

  2. 偶的《javascript框架设计》终于出版

    #cnblogs_post_body p{ text-indent:2em!important; } 历时两年多,我的书终于付梓出版了.应各方面的要求,写软文一篇,隆重介绍一下此书对各位程序员的钱途有 ...

  3. 第二十二课:js事件原理以及addEvent.js的详解

    再看这篇博客之前,希望你已经对js高级程序编程一书中的事件模块进行了详读,不然我只能呵呵了. document.createEventObject,在IE下创建事件对象event. elem.fire ...

  4. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  5. 30个你必须记住的CSS选择符

    所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...

  6. web开发必须知道的javascripat工具

    1,JavaScript compressor and comparison tool 有许多工具可以帮助你压缩JavaScript代码,但是这个过程比较耗时,并且,对于某个特定的场景来说,很难分析出 ...

  7. PubSub的一种实现

    今天在浏览JavaScript事件时,复习了下Dean Edward大神的addEvent.突然觉得可以基于他的思路实现一个结构更好的PubSub. 思路也很简单,就是要维护一个类似如下的一个仓库结构 ...

  8. 30类css选择器

    大概大家都知道id,class以及descendant选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式.这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相 ...

  9. 整理CSS选择符

    1.星号选择器 ;; } 星号选择器将匹配页面里的每一个元素.很多开发者使用这个技巧将外边距和内边距重置为零.虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它.它给浏览器带来大量不必 ...

  10. 看这一篇就够了,css选择器知识汇总

    对大多技术人员来说都比较熟悉CSS选择器,举一例子来说,假设给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了, ...

随机推荐

  1. Mac环境下Octopress个人博客搭建

    一直想弄一个漂亮一点的个人博客,之前一直用的博客园,对主页的能自定义内容实在不满意,终于下定决定,找到了Octopress这个适合我的解决方案,以下过程都是自己一步一步记录下来的,希望对大家有帮助. ...

  2. JSP实现在项目在网页上查询

    <table> <caption>user</caption> <tr> <td>编号</td> <td>姓名< ...

  3. Java中堆内存和栈内存详解

    Java把内存分成两种,一种叫做栈内存,一种叫做堆内存 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个变量时,java就在栈中为这个变量分配内存空间 ...

  4. syntax error near unexpected token‘(

    用虚拟机的时候出现这样的: 上网查了资料之后,在括号"( " 前加上"$"字符就暂时不会提示出错了.

  5. Session 、Application 和 HttpContext 的使用区别

    在ASP.NET WEB页面开发中,经常会需要保存一些信息,以便在不同的页面或时间段都能够访问到.这其中便会用到Session和Application. Session .Application 和 ...

  6. hadoop2.2编程:MRUnit测试

    引用地址:http://www.cnblogs.com/lucius/p/3442381.html examples: Overview This document explains how to w ...

  7. 剑指offer编程题java实现(正在更新)

    面试题三:查找二维数组中元素问题 public static void main(String[] args){ int[][] num = {{1,2,8,9},{2,4,9,12},{4,7,10 ...

  8. DotNet Core 介绍

    前言 asp.net core rtm 6月底即将发布,自己也想着为社区做点共享,刚好最近不太忙,看到社区的小伙伴们都在为dotnet core的推广而贡献力量,项目中刚好在用rc2版本,就多写些文章 ...

  9. ENode框架Conference案例分析系列之 - 复杂情况的读库更新设计

    问题背景 Conference案例,是一个关于在线创建会议(类似QCon这种全球开发者大会).在线管理会议位置信息.在线预订某个会议的位置的,这样一个系统.具体可以看微软的这个项目的主页:http:/ ...

  10. 新浪微博UWP版-实现‘分享功能’的艰难路

    索引 介绍 遇到的问题 寻求帮助 最终的解决方案 最终效果 介绍 在整个Team的共同努力下,在众多WPer的期待下,Weibo UWP版终于正式发布了.有关Weibo UWP版更多的信息请大家参考这 ...