![1bdd19f9cc3bfe9a1b4106ff080c78cf.png](https://i-blog.csdnimg.cn/blog_migrate/a694eadd8bd0daafa0e29b72eb4d994c.jpeg)
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;
}