js事件捕获和事件冒泡

]
Netscape 定义了事件捕获，先是最顶级的元素（document）响应事件，然后逐层往下，最后到达最低层的元素。
IE 定义了事件冒泡，先是最底层的事件进行响应，然后逐层网上，最后到达document。注意先到达html元素，再到达document。

W3C取各家所长，定义了事件捕获和事件冒泡，当document发现有事件发生时，就进入了事件捕获阶段，等当事件被处理完毕后，就冒泡到回doucment。
DOM的addEventListener方法接受三个元素，第一个为所需要处理的事件，第二个参数为事件处理函数，
第三个参数为一个boolean，true时代表在捕获阶段进行事件处理，false代表在冒泡阶段进行事件处理。
我们一般使用false，这样就可以拥有和IE中的attachEvent()一样的作用。如果我们使用true，那么在IE8中不会被实现。

需要注意的是，类似element.onclick = function(){}等用法，假设我们使用事件冒泡阶段去处理事件。
相当多的浏览器支持事件冒泡和事件捕获，IE版本8及以前只支持事件事件冒泡
我们一般不使用如下方式，因为当我们制作大型网站时，往往有很多事件，我们就要在内存中维护很多这种dom及相应在js中定义的事件处理程序，这样就降低了运行速度

document.getElementById("help-btn").onclick = function(event){
    openHelp();
};

document.getElementById("save-btn").onclick = function(event){
    saveDocument();
};

document.getElementById("undo-btn").onclick = function(event){
    undoChanges();
};

我们考虑使用这种方式

document.onclick = function(event){
    //IE doesn't pass in the event object
    event = event || window.event;

    //IE uses srcElement as the target
?    var target = event.target || event.srcElement;    

    switch(target.id){
        case "help-btn":
            openHelp();
            break;
        case "save-btn":
            saveDocument();
            break;
        case "undo-btn":
            undoChanges();
            break;
        //others?
    }
};

也就是在最高层进行事件处理，我们也可以为类似的事件使用同样的方式，比如事件mousedown, mouseup, mousemove, mouseover, mouseout, dblclick, keyup, keydown, and keypress
这里需要注意mouseout和mouseover由于他们本身的特性很难使用这种方式，因为当鼠标从一个区域移出后，它很可能被认为是从子元素移往上层元素，也就是仍然处于这个区域中，事件不会被触发
[url]http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/[/url]