DOM事件模型的两件事(1)

【 tulaoshi.com - Web开发 】

　　事件捕捉（EventCapture）的实现问题
　　
　　IE的高级事件处理模型的问题
　　
　　一、事件捕捉（EventCapture）的实现问题
　　
　　首先在说这件事前，先感谢一下Realazy。
　　
　　W3CDOMLevel2的事件模型规范中，事件在DOM树中的传播过程（从根节点到目标节点）被分为了两个阶段：捕捉（Capture）和冒泡（Bubbling）。下面这个图能大概的说明整个过程：
　　
　　(fromW3C)
　　
　　如果想创建一个捕捉事件，在支持W3C事件模型的浏览器中，将addEventListener的第三个参数设为true就好了。例如：
　　
　　document.getElementById('foo').addEventListener('click',function(){alert('Hello,world!');},true);
　　
　　前一阵因为想弄懂事件捕捉，所以做了点小实验，分别在Firefox2、Safari3onWindows和Opera9上实践了事件捕捉（当然，因为IE不支持事件捕捉，所以），实验的原理见下图：
　　
　　ID为div1和div2的两个元素都被委派了捕捉阶段的事件处理函数，这样：
　　
　　当点击#div1（蓝色区域）时，应该会alert出div1″
　　
　　当点击#div2（黄色区域）时，应该会先alert出div1″，再alert出div2″，因为在事件捕捉阶段，事件是从根元素向下传播的，#div1是#div2的父元素，自然绑定在#div1上的click事件也会先于#div2上的click事件被执行。
　　
　　然而，以上的设想只试用于Firefox2和Safari3onWindows，在Opera9中，事情会变成这样：
　　
　　当点击#div1（蓝色区域）时，什么都不会发生
　　
　　当点击#div2（黄色区域）时，会alert出div1″，随后什么都不会再发生
　　
　　可以看出，在Opera9中，目标元素（TargetElement）的click事件没有被执行。通过Realazy（orz）的指点，找到了这篇文章：《Eventcaptureexplained》，发现，
　　
　　来Opera中的实现才是正确的。此文中有一段话如是说：
　　
　　TheDOMspecstatesthatcapturingeventsshouldnotfireontarget,becausetheideaofacapturingeventistodetecteventsbeforetheyreachtheirtargets.BecauseofbugsinGeckoandSafari,webcontentthatistestedmostlywithFirefoxorotherGecko-basedbrowserssometimesexpectscapturinglistenerstofireontarget.SuchcontentwillfailinOpera7,8andcurrentreleasesof9becauseofitscorrectimplementationofthestandard.
　　
　　大意是说：DOM规范中陈述了捕捉型的事件不应该在目标元素上被执行，因为捕捉型事件的用意就是为了监测到达目标元素之前的事件。Firefox和Safari的实现都是带有bug的。
　　
　　再来看看W3C的DOMEvents规范中的原话：
　　
　　AcapturingEventListenerwillnotbetriggeredbyeventsdispatcheddirectlytotheEventTargetuponwhichitisregistered.
　　
　　所以，在整个事件传播中，被执行的顺序是：
　　
　　父元素中所有的捕捉型事件（如果有）自上而下地执行
　　
　　目标元素的冒泡型事件（如果有）
　　
　　父元素中所有的冒泡型事件（如果有）自下而上地执行
　　
　　在了解了这些后，也许还是不要使用事件捕捉为妙，至少暂时不要。