Javascript事件模型：事件捕获和事件冒泡

在Javascript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。

Event是什么？

event是用户操作网页时发生的交互动作，比如click/move, event除了用户触发的动作外，还可以是文档加载，窗口滚动和大小调整。

 

Event模型是什么？

Event模型指的是浏览器如何处理发生的事件。不同的浏览器其处理机制也不尽相同，甚至截然相反。

一般而言，某个界面元素发生单个事件，那么事件的处理对象就是该界面元素。

但一个典型的问题是如果该界面元素存在父子元素，而且父子元素也定义了同样的事件，

这个时候事件该如何处理呢，事件在父子元素之间是如何传递的呢，谁会先接收到这个事件，又是谁先处理呢？

举个例子：

-----------------------------------

| element1                        |

|   -------------------------     |

|   |element2               |     |

|   -------------------------     |

|                                 |

-----------------------------------

element2是element1的子元素，两者都定义了onclick事件。

这就是事件模型（事件序列）要解决的问题。

 

两种模型

回到网景和微软斗争的年代，两个公司选择了不同的道路：

网景选择的是事件捕获(event capturing)模型，即网景认为element1首先获取到事件；

微软选择了和其桌面系统类似的消息机制，认为element2有更高的优先权，即事件冒泡(event bubbling)，

这两个模型截然相反，IE仅支持event bubbling. Mozilla, Opera 7等两种都支持. 更老版本的Opera和iCab两种都不支持。

你现在也许体会到了什么是互联网最初那最好也最坏的年代。

 

事件捕获

    | |

--------------- | |-----------------

| element1      | |                |

|   -----------    | |-----------     |

|   |element2   \ /          |     |

|   -------------------------     |

|        Event CAPTURING          |

-----------------------------------

看上面箭头的方向，element1的事件处理器首先被触发，然后向下传递到element2

事件冒泡

/ \

--------------| |-----------------

| element1   | |                |

|   ----------- | |-----------     |

|   |element2 | |          |     |

|   -------------------------     |

|        Event BUBBLING           |

-----------------------------------

与事件捕获相反，element2的事件处理器会首先被触发。

 

W3C模型

W3C非常理智的处理了这种差异，在两者之间采取了中和的方法，W3C模型规定任何事件首先会被捕获直到遇到目标元素，然后再向上返回。

    | |  / \

-----------------| |--| |-----------------

| element1       | |  | |                |

|   ---------------| |--| |-----------     |

|   |element2    \ /   | |          |     |

|   --------------------------------     |

|        W3C event model                 |

------------------------------------------

WEB开发人员可以通过addEventListener()方法来选择在哪个阶段注册事件处理器（捕获阶段还是冒泡阶段），这个方法在Advanced models中有详细描述，其最后一个参数为true，则代表事件在捕获阶段被处理，false则代表事件在冒泡阶段被处理。

 

比如：

element1.addEventListener('click',doSomething2,true)

element2.addEventListener('click',doSomething,false)

事件首先被element1捕获，然后执行doSomething2，接着事件传递给element2，doSomething被执行，接着，事件冒泡回溯，检查是否有父元素(element1)定义了冒泡阶段的事件处理器，这里没有，所以事件终止。

 

兼容传统模型

在支持W3C DOM的浏览器中，传统的事件注册被看作是注册于冒泡阶段。

element1.onclick = doSomething2;

 

javascript 的事件冒泡如何阻止

 

1、cancelBubble（HTML DOM Event 对象属性）
：如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。

 

2、stopPropagation（HTML DOM Event 对象方法）：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

 

3、 preventDefault（HTML DOM Event 对象方法）通知浏览器不要执行与事件关联的默认动作。

 

例子：

function stopBubble(e)

{

if (e && e.stopPropagation)

e.stopPropagation()

else

window.event.cancelBubble=true

}

 

把这个stopBubble(e)函数放到你想要的阻止事件冒泡函数里面就可以阻止事件冒泡了