冒泡、捕获

 1 var father = document.getElementById('father');
 2     var btn = document.getElementById('btn');
 3 
 4     btn.addEventListener('click', function (event) {
 5         // 阻止冒泡
 6         if(event && event.stopPropagation){ // w3c标准
 7             event.stopPropagation();
 8         }else{ // IE系列 IE 678
 9             event.cancelBubble = true;
10         }
11 
12        alert('点击了按钮');
13     });
14 
15     father.addEventListener('click', function (ev) {
16         // 阻止冒泡
17         if(event && event.stopPropagation){ // w3c标准
18             event.stopPropagation();
19         }else{ // IE系列 IE 678
20             event.cancelBubble = true;
21         }
22 
23         alert('点击了父标签');
24     });
25 
26     document.addEventListener('click', function (ev) {
27         alert('点击了文档');
28     });
29 
30 //阻止冒泡的兼容

 1  /*
 2       element.addEventListener(event, function, useCapture)
 3       可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
 4 
 5     可能值:
 6     true - 事件句柄在捕获阶段执行   先触发父--子
 7     false- false- 默认。事件句柄在冒泡阶段执行   先触发  子--父
 8     */
 9 
10     var father = document.getElementById('father');
11     var btn = document.getElementById('btn');
12 
13     btn.addEventListener('click', function (event) {
14         alert('点击了按钮');
15     }, true);
16 
17     father.addEventListener('click', function (ev) {
18         alert('点击了父标签');
19     }, true);
20 
21     document.addEventListener('click', function (ev) {
22         alert('点击了文档');
23     }, true);

捕获阶段不能阻止冒泡