这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
DOM 事件模型的两件事:事件捕捉 (Event Capture) 的实现问题以及 IE 的高级事件处理模型的问题。
事件捕捉(Event Capture)的实现问题W3C DOM Level2 的事件模型规范中,事件在 DOM 树中的传播过程(从根节点到目标节点)被分为了两个阶段:捕捉(Capture)和冒泡(Bubbling)。下面这个图能大概的说明整个过程:
(from W3C) 如果想创建一个捕捉事件,在支持 W3C 事件模型的浏览器中,将 addEventListener 的第三个参数设为 true 就好了。例如:
- document.getElementById('foo').addEventListener('click',
- function() {
- alert('Hello, world!');
- },
- true);
前一阵因为想弄懂事件捕捉,所以做了点小实验,分别在 Firefox 2、Safari 3 on Windows 和 Opera 9 上实践了事件捕捉(当然,因为 IE 不支持事件捕捉,所以…),实验的原理见下图:
ID 为 div1 和 div2 的两个元素都被绑定了捕捉阶段的事件处理函数,这样: 当点击 #div1(蓝色区域)时,应该会 alert 出 "div1″ 当点击 #div2(黄色区域)时,应该会先 alert 出"div1″,再 alert 出 "div2″,因为在事件捕捉阶段,事件是从根元素向下传播的,#div1 是 #div2 的父元素,自然绑定在#div1 上的 click 事件也会先于#div2 上的 click 事件被执行。 然而,以上的设想只试用于 Firefox 2 和 Safari 3 on Windows,在 Opera 9 中,事情会变成这样: 当点击 #div1(蓝色区域)时,什么都不会发生 当点击 #div2(黄色区域)时,会 alert 出"div1″,随后什么都不会再发生 可以看出,在 Opera 9 中,目标元素(TargetElement)的 click 事件没有被执行。通过 Realazy(orz…)的指点,找到了这篇文章:《Event capture explained》,发现,原来 Opera 中的实现才是正确的。此文中有一段话如是说: The DOM spec states that capturing events should not fire on target, because the idea of a capturing event is to detect events before they reach their targets. Because of bugs in Gecko and Safari, web content that is tested mostly with Firefox or other Gecko-based browsers sometimes expects capturing listeners to fire on target. Such content will fail in Opera 7, 8 and current releases of 9 because of its correct implementation of the standard. 大意是说:DOM 规范中陈述了捕捉型的事件不应该在目标元素上被执行,因为捕捉型事件的用意就是为了监测到达目标元素之前的事件。Firefox 和 Safari 的实现都是带有 bug 的。 再来看看 W3C 的 DOM Events 规范中的原话: A capturing EventListener will not be triggered by events dispatched directly to the EventTarget upon which it is registered. 所以,在整个事件传播中,被执行的顺序是: 父元素中所有的捕捉型事件(如果有)自上而下地执行 目标元素的冒泡型事件(如果有) 父元素中所有的冒泡型事件(如果有)自下而上地执行 在了解了这些后,也许还是不要使用事件捕捉为妙,至少暂时不要。
IE 的高级事件处理模型的问题重复绑定 IE 下没有 addEventListener,但是也有自己的 attachEvent,即所谓的 Microsoft Model。二者的实现基本相同只是 attachEvent 的第一个参数(事件类型)需要加 "on",而 addEventListener 不用,另外 attachEvent 因为不支持事件捕捉,所以也没有第三个参数。 然而,attachEvent 还有一个很要命的问题:重复绑定事件。(这是从 ppk on JavaScript 中学到的) 一个例子:
- 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); 会被忽略。 而在 Microsoft 模型中,第二个 $('div1').attachEvent('onclick', sayHello); 同样会被执行,所以,当你点击 #div1 的时候,alert 框会弹出来两次。更有甚者,在 detachEvent 时候,也同样要 detachEvent 两次才能彻底把 sayHello 从#div1 的 click 事件中删除。 为什么不继续使用 alertID() 了? 这是因为 IE 的事件模型的另一个缺陷,在 alertID 中,使用了 this 关键字来指代被绑定了该事件处理函数的元素,这样,在 W3C 模型中,alertID 中的 this 指代了 #div1 或者#div2。 但是在 Microsoft 模型中,缺少了对 this 的支持后,this.id 就会变为 undefined,因为这时候 this 指代了 window 对象。
来源: http://www.phperz.com/article/17/0415/284495.html