reportview触发click事件_事件捕获和事件冒泡

1.概念

事件捕获：Document —> 触发节点

事件冒泡：触发节点 —> Document

btn.addEventListener('click',fn,true); 捕获阶段调用fn

btn.addEventListener('click',fn); 冒泡阶段调用fn

2.运用冒泡点击一次触发三个

var son = document.querySelector('.son');  
son.addEventListener('click', function() {  
    alert('son');  
});  
var father = document.querySelector('.father');  
father.addEventListener('click', function() {  
    alert('father');  
});  
document.addEventListener('click', function() {  
    alert('document');  
}) 

3.事件委托

给ul注册点击事件，点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。于给多个li注册点击事件相比，我们只操作了一次DOM，提高了程序的性能。

var ul = document.querySelector('ul'); 
ul.addEventListener('click', function(e) { 
    // e.target 这个可以得到我们点击的对象 
    e.target.style.backgroundColor = 'pink'; 
}) 

4.阻止事件冒泡

son.addEventListener('click', function(e) {  
    alert('son'); 
    e.stopPropagation(); // 阻止冒泡(标准) 
    e.cancelBubble = true; // 阻止冒泡(非标准) 
}, false);

兼容处理(少用)

if(e && e.stopPropagation){ e.stopPropagation();

}else{

window.event.cancelBubble = true;

}