事件委托、事件冒泡

addEventListener

window.addEventListener(eventType,handlerFunction,Boolean);
参数:
eventType: 事件类型, 
handlerFunction: 事件函数, 
Boolean: 默认为false(事件冒泡),true(事件捕获)。

事件委托

事件委托也叫事件代理，javascript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

简单理解：
即是把原本绑定在子元素上的响应事件（click,keydown....）委托给父组件，让父组件担当监听的职务。事件代理的原理是DOM元素的事件冒泡。

优点：
1. 可以大量节省内存占用
2. 动态生成的DOM也可以触发事件

<ul id='btn'>
  <li></li>
</ul>

const btn = document.getElementById('btn');  
btn.addEventListener('click', function() {
})

阻止事件冒泡

e.stopPropagation();  //主浏览器
e.cancelBubble = true; //兼容ie11以下版本


<ul id='btn'>
  <li></li>
</ul>

const btn = document.getElementById('btn');  
btn.addEventListener('click', function(e) {
   let ev = e || window.event;
   ev.stopPropagation && (ev.stopPropagation() || (ev.cancelBubble = true));
})

TIM截图20200806155320.png