冒泡、捕获

 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);

捕获阶段不能阻止冒泡