🌈 冒泡和捕获

子级会向父级传递自己的事件，如果父级也有相同事件则响应

• 冒泡：事件从 DOM 子元素向父级传递，触发父级的相同类型的事件
  • 即使子元素在视觉上不在父元素容器内，也会向上传递
  • 父元素不绑定同类型事件处理函数，祖父绑定，祖父的事件处理函数仍然会触发
• 捕获：自嵌套关系的最顶层，向子元素传递，到事件源
• elem.addEventListener(事件类型，事件处理函数，false) false事件冒泡，true事件捕获
• 先捕获，后冒泡。到事件源的时候，按照绑定顺序执行
  • 新版chrome事件源不再根据绑定顺序执行，而是统一变成先捕获后冒泡，参考https://juejin.cn/post/6965682915141386254
  • 到事件源的时候，处于target阶段，没有捕获or冒泡的说法。所以不用care执行顺序。代码层面上注意下就行，最好先写捕获再写冒泡

<style>
  .wrapper {
    width: 150px;
    height: 150px;
    background-color: aqua;
  }
  .outer {
    width: 100px;
    height: 100px;
    margin-left: 150px;
    background-color: bisque;
  }
  .inner {
    width: 75px;
    height: 75px;
    margin-left: 100px;
    background-color: blueviolet;
  }
</style>

<div class="wrapper">
  <div class="outer">
    <div class="inner"></div>
	</div>
</div>

<script>
var wrapper = document.getElementsByClassName('wrapper')[0];
var outer = document.getElementsByClassName('outer')[0];
var inner = document.getElementsByClassName('inner')[0];
  
wrapper.addEventListener('click', function() {
	console.log('wrapper-冒泡');
}, false);
outer.addEventListener('click', function() {
	console.log('outer-冒泡');
}, false);
inner.addEventListener('click', function() {
	console.log('inner-冒泡');
}, false);

wrapper.addEventListener('click', function() {
	console.log('wrapper-捕获');
}, true);
outer.addEventListener('click', function() {
	console.log('outer-捕获');
}, true);
inner.addEventListener('click', function() {
	console.log('inner-捕获');
}, true);
</script>

新版chrome：

旧版 chrome 和新旧版 Firefox、Safari 都还是顺序执行：

• focus blur change submit reset select 没有冒泡
• 老版本IE没有捕获

阻止事件冒泡

w3c: e.stopPropagation(); -> Event.prototype

oDiv.addEventListener('click', function(e) {
	var e = e || window.event;
  e.stopPropagation(); 
}, false);

IE: e.cancelBubble = true;

oDiv.addEventListener('click', function(e) {
	var e = e || window.event;
  e.cancelBubble = true;
}, false)

🌈 封装阻止事件冒泡