W3C DOM 事件模型(简述)

1、事件模型

因为事件捕获与冒泡模型都有其优点和解释，DOM标准支持捕获型与冒泡型，可以说是它们两者的结合体。它可以在一个DOM元素上绑定多个事件处理器，并且在处理函数内部，this关键字仍然指向被绑定的DOM元素，另外处理函数参数列表的第一个位置传递事件event对象。首先是捕获式传递事件，接着是冒泡式传递，所以，如果一个处理函数既注册了捕获型事件的监听，又注册冒泡型事件监听，那么在DOM事件模型中它就会被调用两次。



【 oschina】

2、事件传播

A）冒泡模式(Bubble)IE浏览器只支持这种形式的传播，即事件对象从事件触发的目标（target）开始，一直传播到侦听同样事件类型的target祖先结点为止。即作为全局变量的时间对象沿着”元素树“向上传播

B）捕捉模式（Capture）这种模式与冒泡模式正好相反，即事件对象是从目标的外层向目标传播的，即从树的根结点向叶子结点传播。

3、事件注册

根据 DOM 2 Events 中描述，节点使用 'addEventListener' 和 'removeEventListener' 方法绑定和解绑事件监听器。

if(add.addEventListener){
add.addEventListener("click",showMsgB,false);
remove.addEventListener("click",removeE,false);
}

IE下没有addEventListener，但是也有自己的attachEvent，即所谓的Microsoft Model。二者的实现基本相同只是attachEvent的第一个参数（事件类型）需要加”on”，而addEventListener不用，另外attachEvent因为不支持事件捕捉，所以也没有第三个参数。

if(add.attachEvent){
add.attachEvent("onclick",showMsgA);
remove.attachEvent("onclick",removeE);
}

在支持W3C DOM的浏览器中，传统的事件注册被看作是注册于冒泡阶段。element.onEvent =handler()

4、stopPropagation, preventDefault 和 return false 的区别

stopPropagation()：因为事件可以在各层级的节点中传递, 不管是冒泡还是捕获, 有时我们希望事件在特定节点执行完之后不再传递, 可以使用事件对象的 stopPropagation() 方法。

preventDefault() 阻止后面将要执行的浏览器默认动作。

return false 之后的所有触发事件和动作都不会被执行。

参考资料

DOM事件模型：http://wenku.baidu.com/view/feafe986b9d528ea81c779e3.html

SD9011: 事件模型在各浏览器中存在差异：http://w3help.org/zh-cn/causes/SD9011

W3C DOM及其事件模型之初见：http://blog.csdn.net/yczxwestwood/article/details/6412997

stopPropagation, preventDefault 和 return false 的区别：http://www.neoease.com/stoppropagation-and-preventdefault-and-return-false/