冒泡、捕获

var father = document.getElementById('father');
    var btn = document.getElementById('btn');

    btn.addEventListener('click', function (event) {
        // 阻止冒泡
        if(event && event.stopPropagation){ // w3c标准
            event.stopPropagation();
        }else{ // IE系列 IE 678
            event.cancelBubble = true;
        }

       alert('点击了按钮');
    });

    father.addEventListener('click', function (ev) {
        // 阻止冒泡
        if(event && event.stopPropagation){ // w3c标准
            event.stopPropagation();
        }else{ // IE系列 IE 678
            event.cancelBubble = true;
        }

        alert('点击了父标签');
    });

    document.addEventListener('click', function (ev) {
        alert('点击了文档');
    });

//阻止冒泡的兼容

 /*
      element.addEventListener(event, function, useCapture)
      可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

    可能值:
    true - 事件句柄在捕获阶段执行   先触发父--子
    false- false- 默认。事件句柄在冒泡阶段执行   先触发  子--父
    */

    var father = document.getElementById('father');
    var btn = document.getElementById('btn');

    btn.addEventListener('click', function (event) {
        alert('点击了按钮');
    }, true);

    father.addEventListener('click', function (ev) {
        alert('点击了父标签');
    }, true);

    document.addEventListener('click', function (ev) {
        alert('点击了文档');
    }, true);

捕获阶段不能阻止冒泡