什么是事件委托?
事件代理(event delegation):事件代理又称事件委托,是javaScript中绑定事件的常用技巧。顾名思义,‘事件代理’就是把原本需要绑定的事件委托给父元素,让父元素负责事件监听。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能。
由一个案例来引出:
现在有一个需求:点击li添加背景颜色,并排他,点哪个哪个有背景颜色
<ul>
<li class="selected">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: 400px;
border: 1px solid #000;
margin: 100px auto;
}
li{
width: 100%;
height: 50px;
border-bottom: 1px solid #000;
box-sizing: border-box;
}
.selected{
background-color: red;
}
先来看一般做法,缺点是保存了多份onclick的函数
let oItems = document.querySelectorAll('li');
let currentItem = oItems[0];
for (let item of oItems){
// item.onclick = change;
item.onclick = function () {
currentItem.className = '';
this.className = 'selected';
currentItem = this;
}
}
改进:
let oItems = document.querySelectorAll('li');
let currentItem = oItems[0];
for (let item of oItems){
item.onclick = change;//一定不要写成了item.onclick = change();
}
function change() {
currentItem.className = '';
this.className = 'selected';
currentItem = this;
}
事件委托的做法:监听ul的点击,而不是直接监听li的点击,li将事件冒泡到它的父元素ul,再通过事件对象拿到当前被点击的元素。
let oUl = document.querySelector('ul');
let oLi = document.querySelector('.selected');
oUl.onclick = function (event) {
event = event || window.event;//兼容所有浏览器
oLi.className = '';
let item = event.target;//event.target为当前点击的li
item.className = 'selected';
oLi = item;
}
最后一种事件委托做法利用的是事件冒泡
事件委托的好处:
1.减少事件数量,提高性能
2.预测未来元素,新添加的元素仍然可以触发该事件
3.避免内存外泄,在低版本的IE中,防止删除元素而没有移除事件而造成的内存溢出