事件冒泡与事件委托 -Tom

事件冒泡

事件冒泡，就是事件触发的时候通过DOM向上冒泡，首先要知道不是所有的事件都有冒泡。事件在一个目标元素上触发的时候，该事件将触发祖先节点元素，直到最顶层的元素：

如图所示，如果a连接被点击，触发触发连接的click事件，然后触发p的click事件，以此再触发div和body的click事件。顺序不变，而且不一定是在同时触发的。
这样你就可以利用该特性去处理自己的逻辑了，并且再任何时候都可以停止冒泡，比如，如果你只想冒泡到文本节点上，而不再进一步冒泡，你可以在p的click事件处理函数里停止冒泡：

function myParagraphEventHandler(e) {

    e = e || window.event;

    // 停止向上冒泡
    if (e.stopPropagation) {
        // W3C实现  
        e.stopPropagation();
    } else {
        // IE实现  
        e.cancelBubble = true;
    }

}

// 使用我们自定义的addEvent函数将myParagraphEventHandler绑定到click事件上：  
addEvent(document.getElementsByTagName('p')[0], 'click', myParagraphEventHandler);

事件委托

举例来说，如果你有一个很多行的大表格，在每个<tr>上绑定点击事件是个非常危险的想法，因为性能是个大问题。流行的做法是使用事件委托。事件委托描述的是将事件绑定在容器元素上，然后通过判断点击的target子元素的类型来触发相应的事件。

var myTable = document.getElementById('my-table');

myTable.onclick = function () {

    // 处理浏览器兼容
    e = e || window.event;
    var targetNode = e.target || e.srcElement;

    // 测试如果点击的是TR就触发
    if (targetNode.nodeName.toLowerCase() === 'tr') {
        alert('You clicked a table row!');
    }

}

事件委托依赖于事件冒泡，如果事件冒泡到table之前被禁用的话，那上面的代码就无法工作了。