事件委托、事件冒泡

2020-08-10  本文已影响0人  INGME
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
上一篇 下一篇

猜你喜欢

热点阅读