Javascript 之 事件冒泡(Event Bubbling)

IE4x, 介绍一种新的处理事件的方法----事件冒泡. 对 Html 和 Javascript 来说这是全新的, 但是在许多其他的环境中他早已经被应用, 如: windows, os/2, HyperCard等.

起始的时候, IE4x 直接将一个事件引向的他的指定目标, 例如: 如果一个按钮被单击, 那么这个按钮就是他的目标.如果已经为这个对象定义好了事件处理程序, 那么这个事件就会调用事件处理程序, 如果没有定义任何处理程序, 或者事件处理程序的返回值为 'true' (为 'false' 将会取消事件),那么这个事件会向这个对象的父级对象传播, 进行处理, 这个事件会一直在整个对象层次中冒泡, 直到他被处理, 或者他到达对象层次的最顶层, document 对象.

为了弄清这个机制, 你必须要对 IE4x 中的 DOM 模型有一些基本的了解. 所有的文档内容, 包括元素和属性, 都是可访问, 可操纵的. 换句话说, 在 IE4x 中, 每个元素都被组织成一个对象, 包含的对象层次中.因此在页面上的每个元素, 都可能是事件源.

就想W3C工作草案中描述的那样.

• 所有的元素都能够产生事件


• 将有交互事件, 更新事件和, 更改事件.


• 事件模型将会对用户的交互做出反应.


• 事件传输机制将允许默认行为的重写.


• 事件将会在文档的对象结构中冒泡.


• 事件是同步的.


• 事件将会用一个中立的方式被定义.


• 将提供事件绑定的接口.

事件冒泡是很有用的, 因为他允许多个操作被集中处理.他可以让你在对象层的不同级别捕获事件.

下面来看个例子:
[html]
<p onClick="functionName()">
This is a paragraph, and <b> these are bold words in the paragraph</b></p>
[/html]

自从页面上的每个单独的元素被描绘成一个对象以后, 可以为 <p>标记提供一个 onClick 事件处理程序.例如当你单击单词: 'words' 的时候, click 事件会直接指向 P 元素进行处理,如果 P 元素有合适的事件处理程序,将会处理这个事件, 事件将会停止他的传递过程.当你单击单词 'these' 的时候, 这个事件首先被发送到元素 B,因为 B 也被表现为一个对象, 因为他没有 click 事件的处理程序, 所以这个事件被冒泡给他的父元素,这个段落处理了该事件.如果 IE4x 不支持事件的冒泡, 以上所说的情况也不可能发生.

阻止事件冒泡
[js]
//如果提供了事件对象, 则这是一个非IE浏览器
if ( e && e.stopPropagation ) {
//因此它支持 W3C 的 stopPropagation()方法
e.stopPropagation();
} else {
//否则, 我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
return false;
[/js]

阻止浏览器的默认行为
[js]
//如果提供了事件对象, 则这是一个非IE浏览器
if ( e && e.preventDefault )
//阻止默认浏览器动作(W3C)
e.preventDefault();
} else {
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
return false;
[/js]