事件流、事件委托等

1、DOM事件流

a.事件捕获 （房子里面有人， 由外到里，一层层进的抓住他）
b.事件冒泡 （抓到人了， 由里到外，一层层告诉抓到了）
// 第三个参数 { 捕获：true} | { 冒泡：false } (默认 false 冒泡 )

栗子：
parent.addEventListener('click', function () {}, true);

2、event、阻止冒泡等属性事件、事件代理/事件委托

2.1 event

 btn.addEventListener('click', function(e){ console.log(e);}, false);

2.2 属性及方法
2.2.1 取消默认行为 event. preventDefault()
2.2.2 阻止事件向上冒泡传递 event.stopPropagation()
2.2.3 阻止任何父事件处理程序被执行 event.stopImmediatePropagation() [下边有栗子区分 stopPropagation] (阻止冒泡 + 禁止同元素 同事件的传递)

// 2.2.3 栗子
a.addEventListener('click', function(e) {
  console.log('a click 1');
  e.stopImmediatePropagation();
});

a.addEventListener('click', function() {
  console.log('a click 2');
});
//  输出是 ： 'a click 1'
//  而不是 ：  'a click 1'  'a click 2'

2.2.4
event.target (触发事件的元素)【译：目标】
event.currentTarget (事件触发后 现阶段的元素) 【译：现在的目标】

2.2.5 事件代理/事件委托（Event Delegation）
目的：减少内存消耗，提高性能
原理：利用事件冒泡， 监听父元素； 所有子元素的 同属性事件都会集中到 父元素解决；
利用 event.target 确定是哪一个子元素 触发的 。