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. bfs判断连通图(无向)

    在图论中,连通图基于连通的概念.在一个无向图 G 中,若从顶点vi到顶点vj有路径相连(当然从vj到vi也一定有路径),则称vi和vj是连通的.如果 G 是有向图,那么连接vi和vj的路径中所有的边都 ...

  2. 大家一起Aop

    一.前言 1.在项目中无处不充斥着记录日志的代码,各种try catch,实在是有点看着不爽.这不,果断要想法子偷个懒儿. 二.摘要 鄙人不才,先总结一下个人想到的可实现AOP的几种思路: 1.通过继 ...

  3. iOS开发系列--C语言之存储方式和作用域

    概述 基本上每种语言都要讨论这个话题,C语言也不例外,因为只有你完全了解每个变量或函数存储方式.作用范围和销毁时间才可能正确的使用这门语言.今天将着重介绍C语言中变量作用范围.存储方式.生命周期.作用 ...

  4. 浅析用Base64编码的图片优化网页加载速度

    想必大家都知道网页加载的过程,从开始请求,到加载页面,开始解析和显示网页,遇到图片就再次向服务器发送请求,加载图片.如果图片很多的话,就会产生大量的http请求,从而影响页面的加载速度.所以现在有一种 ...

  5. 比官方教程代码更简短的SignalR Server Broadcast示例

    SignalR是微软ASP.NET技术体系中的新成员. 在www.asp.net网站上的SignalR专区有一篇SignalR的入门级教程<Tutorial: Server Broadcast  ...

  6. 架构设计(ASP.NET MVC+Knockout+Web API+SignalR)

    最近忙于重构项目的架构设计,没有时间发博客,也没有时间回复邮件及博文评论,忘各位见谅: 今天先发布架构设计图,同样没有时间写相关的介绍也没有时间回复评论,所以就不发在首页,希望给看到的朋友一些参考,同 ...

  7. Sharing A Powerful Tool For Application Auto Monitor

    本文分享的这个应用监控小工具,本来是我在五年多以前开发实现的windows服务监控的一个windows服务.听上去比较拗口吧,是的,这个应用一开始就是个监控windows服务的windows服务. 记 ...

  8. Worktile协同特色之一:无处不在的关注

    团队沟通中常见问题 在回答这个问题之前,我们不妨先来思考一下,团队成员之间互相配合沟通的几个问题:1. 任务的执行者在完成这个任务时,如何通知到此任务相关联的其他成员,比如该任务的后续任务执行者?2. ...

  9. css+div常用属性备忘录

    学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...

  10. js array queue (队列)

    前言 今天项目中做一个图片效果展示,需要实时从后台获取图片数据,前段做展示.想想用到队列,比较好实现这个功能,只需要展示队列里的数据就可以了.于是写了个js 对列. js code /** * [Qu ...