jQuery1.6事件架构

@snandy  2015.5

内容

事件概述
添加事件
删除事件
派发事件
事件委托
事件对象

1 jQuery事件概述

35个公开的方法（11+24）
添加事件30个（6+24）
删除事件3个（3）
派发事件26个（2+24）

1.1 jQuery事件模块鸟瞰图

2 添加事件（30个方法）

jQuery为添加事件提供了30个方法，其中6个基本方法，24个快捷方法。添加事件内部的核心方法是jQuery.event.add。

2.1  六个基本方法

bind 基本的添加事件函数
one  添加只执行一次的事件函数
live   事件代理（使用document代理）
delegate  事件代理（使用指定元素代理）
hover  模拟css的hover （内部使用mouseenter，mouseleave）
toggle  显示/隐藏

2.2 内部调用逻辑 

bind/one/live 都是使用内部的jQuery.event.add 来完成事件添加
delegate 内部调用的是live
hover 内部调用mouseenter/mouseleave，而mouseenter/mouseleave又调用bind
toggle 内部调用click，而click内部又调用的是bind

2.3 调用拓扑图

2.4  24个快捷方法

2.5  一个each搞定24个方法

3 删除事件（3个方法）

删除事件有三个方法，内部核心方法是jQuery.event.remove。
unbind / bind
die / live
undelegate / delegate

3.1 内部调用逻辑

unbind 是删除事件基础方法。可删除一个指定handler，还可删除某类型事件的全部handler，甚至可删除挂在element上的全部事件。其内部调用jQuery.event.remove。
die/undelegate 是删除代理事件，两者内部都调用了unbind。

3.2 内部调用逻辑图

4 派发事件（26个方法）

派发事件有2个基本方法和24个快捷方法，内部核心方法是jQuery.event.trigger。

两个基础方法（trigger/triggerHander）
24个快捷方法（click/mouseover/…）

4.1 两个基本方法

trigger
执行事件hanlder
执行冒泡
执行默认行为
triggerHandler
执行事件handler
不冒泡
不执行默认行为

4.2  内部调用逻辑

trigger/triggerHandler 内部调用的都是jQuery.event.trigger
click/mouseover/等快捷方法内部调用trigger

4.3  派发事件内部调用逻辑图

4.4 24个快捷方法

 同2.4添加事件快捷方法

5 事件委托

利用浏览器中事件的冒泡（event bubbling）和事件源（target || srcElement）

5.1 事件委托的优点

需要管理的handler更少
占用的内存更少（创建的驻留在内存中的handler少了）
DOM元素与代码更少的绑定
DOM变更后（如添加或删除节点）无须重新绑定事件处理器

5.2 事件委托的不足

并非所有的事件都能冒泡，如load, change, submit, focus, blur(jQuery实现了focus/blur)
代理元素的handler管理复杂
不好模拟用户触发事件（jQuery已实现）

5.3 jQuery的事件委托API

live使用document对象代理事件
delegate为特定元素代理事件（粒度细）
die解除通过live代理的事件
undelegate解除通过delegate代理的事件

6 事件对象

包装后的事件对象 jQuery.Event的实例

6.1 事件对象API统一为W3C标准

target
currentTarget
stopPropagation
preventDefault
stopImmediatePropagation
isDefaultPrevented
isPropagationStopped
isImmediatePropagationStopped
…

6.2 事件对象上增加的属性

namespace
result
data
originalEvent
…

END