首页 > Web开发 > 详细

jquery1.0 事件处理

时间:2015-03-24 14:44:27      阅读:369      评论:0      收藏:0      [点我收藏+]


    编程语言是汇一个迭代过程,用编编c,用c编java,框架/类库也是这么一个工程,尤其是在这种 行为和内容(事件中应该叫 类型与目标) 分离的函数式类库中,先编写行为方法,在为每个目标添加相应的行为

  • event事件关注点

事件类型/事件名称(type):如click,keydown
事件目标(target):与时间有关的dom对象
事件处理程序/监听程序(fn,会接受事件对象):响应事件的函数
event=event||window.event  
事件对象:与特定事件相关的详细信息(type,target),不同type对应不同的事件子类
事件传播:单个对象事件没必要传播(window.load),文档元素上的事件大多可以传播
        冒泡:向上
        捕获:向下
此处有蛋疼的ie坑

  • jquery1.0 事件处理方式

jquery对事件的处理进行了一个代理,像一种addEventListener的实现(又是一个代理),他解决了几件事
1.兼容,dom事件的绑定规范,怎么好蛋疼
2.提供动态执行方式     $().click();如果"click"是一个参数type
3.提供一种接受参数的能力 (接受参数的事件,关系不大)

  • 事件模型

add(element, type, handler):内部注册方式

技术分享

将事件绑定到element.events上,并且对fn进行了双向获取的处理,而且还要兼容dom的事件方式,因为addEventListener数组一样的特性,内部的fn难免又要变成fns
通过合并创建fns
缓存(无法传递参数,只能通过闭包/缓存的方式暂存方法),element.event=fns
重新绑定dom事件
dom["on"+type]=this.handle (封装的执行方法)
管理所有fn,$.event.global  (for triggering)


guid:管理fn编号
global:fn容器,主要用于触发所有方法


remove(element, type, handler):事件删除

技术分享
删除需要一个比较,还好每个注册的fn都加上guid(污染哦)


trigger(type,data,element):触发

技术分享
行为和内容分离,对吧,以前的执行是语法上的执行,没有办法 动态执行,而且其事件接受的参数可是event,也是global用得上的地方

 

handle:dom上的执行,应该称之为一种接口的实现

技术分享
通过通过自身和type获取fns
循环回掉fn

 

fix:修正默认与传播方法

技术分享


以上方法存在$.event上,工具方法,在后续,会通过这些工具,逐步的去完善/修正整个jquery实例对象的事件

  • 实例注册

找不到一个专业的名词来称呼这种现象,反正就是实例与工具之间的一个接口,大多数情况下,工具方法会被逗比们用的到处都是,又是该死的分层

技术分享

这种写法在很多类库都存在,是为了修改工具接口方式,还是更好的动态生成先不管,这里的名字叫macros/宏

jQuery.macros下的each,有如下方法

技术分享

jQuery.macros会被初始化至原型中,总之从现在开始可以通过实例的方式进行事件的注册,此后应成为bind/绑定

  • 快捷方式

应该说是兼容原有的api方式吧,比如dom.click()-->$().click();

技术分享

绿色的生物是通过dom可以.出来的事件,根据原有的api+函数式风格拓展了bind,unbind和one三个方法,one中的闭包很有操点,但是if(count++)return;差点短路

jquery1.0事件的处理大致就 模型创建 , 实例工具 , 快捷方式 自己写的名词都不好意思加粗,后面还有个read注册,算是内部对事件的一个使用吧

  • ready

技术分享

或许这几个if就已经可以表明,为什么要创建新的事件模型

FF 注册ready
IE 动态加载(defer)
Safari 循环调用(setInterval)

 

当然ready也是由静态和实例2部分组成,静态中包含readylist(fns),而实例则是不断地往readtlist中添加fn,至于注册/确保其执行的方式,就是通过上面的三种操作,够狠吧

  • 工具ready

必备执行的ready,容器ready,唯一的"ready实例" 可以这么说吧

技术分享

 

  • 实例方法下的ready

调用的是工具方法

技术分享

 

jquery1.0 事件处理

原文:http://www.cnblogs.com/liuCy/p/4362631.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!