DOM事件模型的两件事：事件捕捉(Event Capture)的实现问题以及IE的高级事件处理模型的问题。3 z2 c; j4 x) D: i; M( S- T$ @
一、事件捕捉(Event Capture)的实现问题
* p( g) ^$ c- G5 J 3C DOM Level2的事件模型规范中，事件在DOM树中的传播过程(从根节点到目标节点)被分为了两个阶段：捕捉(Capture)和冒泡(Bubbling)。下面这个图能大概的说明整个过程：
4 [6 K. `8 _, m) X% T, X! M/ R4 ]
$ @( c* O, {1 z3 X
5 ?: q0 U- c N (from W3C)
5 g/ W, m; p! n. u+ [ 如果想创建一个捕捉事件，在支持W3C 事件模型的
浏览器中，将addEventListener的第三个参数设为true就好了。例如：
" Q* V4 P. r; I; B document.getElementById('foo').addEventListener('click',function(){alert('Hello, world!');},true);
K6 C3 _+ O# e9 e
在Firefox 2、Safari 3 on
Windows和Opera 9上实践了事件捕捉(当然，因为IE不支持事件捕捉，所以…)，实验的原理见下图：
$ P |1 V' Q. M- b7 V( X 4 N; e9 f ?, V2 \* k% P
1 [ ~0 g& A/ s, O; ~ i' v
ID为div1和div2的两个元素都被委派了捕捉阶段的事件处理函数，这样：
' i- S# m. z' n* g1 ~: E* l0 C 当点击#div1(蓝色区域)时，应该会alert出”div1″
: w, P; R. m* ]0 L
当点击#div2(黄色区域)时，应该会先alert出”div1″，再alert出”div2″，因为在事件捕捉阶段，事件是从根元素向下传播的，#div1是#div2的父元素，自然绑定在#div1上的click事件也会先于#div2上的click事件被执行。
) O6 r B& c7 O2 |0 x 然而，以上的设想只试用于Firefox 2和Safari 3 on Windows，在Opera 9中，事情会变成这样：
' _; I4 ?3 B9 t1 q 当点击#div1(蓝色区域)时，什么都不会发生
: Z0 V4 v# E* t2 Z6 U9 }' c 当点击#div2(黄色区域)时，会alert出”div1″，随后什么都不会再发生
; w: o* E+ y+ Q; g! c 可以看出，在Opera 9中，目标元素(TargetElement)的click事件没有被执行。DOM规范中陈述了捕捉型的事件不应该在目标元素上被执行，因为捕捉型事件的用意就是为了监测到达目标元素之前的事件。Firefox和Safari的实现都是带有bug的。
6 r: x3 S3 }% Q* `' E
再来看看W3C的DOM Events规范中的原话：
. j/ r6 |, t5 v
A capturing EventListener will not be triggered by events dispatched directly to the EventTarget upon which it is registered.
+ }! R5 k; `" O& A1 H# `3 | 所以，在整个事件传播中，被执行的顺序是：
9 o- c0 A2 [5 _) D/ s. L
父元素中所有的捕捉型事件(如果有)自上而下地执行
# N# ^; T7 g0 @/ l% t/ p
目标元素的冒泡型事件(如果有)
/ w- A7 s7 C% H1 z6 a6 g9 g. l
父元素中所有的冒泡型事件(如果有)自下而上地执行
* u1 C3 d! ]* K3 P& ~ A, d
在了解了这些后，也许还是不要使用事件捕捉为妙，至少暂时不要。
( y" Z* x: W5 d! L 二、IE的高级事件处理模型的问题6 D' }2 \; \ X
重复绑定
+ O x+ M6 Q* z; |- B1 ~ IE下没有addEventListener，但是也有自己的attachEvent，即所谓的
Microsoft Model。二者的实现基本相同只是attachEvent的第一个参数(事件类型)需要加”on”，而addEventListener不用，另外attachEvent因为不支持事件捕捉，所以也没有第三个参数。
7 s+ M! k/ ~0 P: T 然而，attachEvent还有一个很要命的问题：重复绑定事件。
2 v- j3 u1 e. a
一个例子：
复制内容到剪贴板
代码:
function sayHello(){
alert('Hello, world!');
}
// W3C Model
$('div1').addEventListener('click', sayHello, false);
$('div1').addEventListener('click', sayHello, false);
// Microsoft Model
$('div1').attachEvent('onclick', sayHello);
$('div1').attachEvent('onclick', sayHello); 在W3C模型中，相同事件处理函数的绑定会被忽略，也就是说第二个$('div1').addEventListener('click', sayHello, false);会被忽略。
) \/ L+ C. K# R$ G i- r' G
而在Microsoft模型中，第二个$('div1').attachEvent('onclick', sayHello);同样会被执行，所以，当你点击#div1的时候，alert框会弹出来两次。更有甚者，在detachEvent时候，也同样要detachEvent两次才能彻底把sayHello从#div1的click事件中删除。
# z2 g! o) E! j: c 为什么不继续使用alertID()了?
4 y+ `8 m s1 w% V+ _ 这是因为IE的事件模型的另一个缺陷，在alertID中，使用了this关键字来指代被委派了该事件处理函数的元素，这样，在W3C模型中，alertID中的this指代了#div1或者#div2。
- C! `( a v* a+ S# w2 p3 [
但是在Microsoft模型中，缺少了对this的支持后，this.id就会变为undefined，因为这时候this指代了window对象。
