谈谈你对事件委托的理解,它有什么好处?写一个简单的示例。
一句话解释事件委托
利用事件冒泡机制处理指定一个事件处理程序,来管理某一类型的所有事件。
事件委托的好处
- 利用冒泡的原理,将事件加到父级身上,触发执行效果,这样只在内存中开辟一块空间,既节省资源又减少DOM操作,提高性能
- 可以为动态添加的元素绑定事件
案例
<ul id="ul">
<li>111111</li>
<li>222222</li>
<li>333333</li>
</ul>
<button id="button">添加元素</button>
<script>
let domUl = document.querySelector('#ul');
let domButton = document.querySelector('#button');
function handleUlClick(e) {
//这里暂不考虑IE兼容
if (e.target.nodeName.toLowerCase() === 'li') {
console.log(e.target.innerText);
e.target.style.background = 'red';
}
}
domUl.addEventListener('click', handleUlClick);
domButton.addEventListener('click', function() {
let newLi = document.createElement('li');
newLi.innerText = 'newnewnew';
domUl.append(newLi);
});
</script>
复制代码