事件委托的原理，优缺点
2018-11-24 本文已影响0人
清汤饺子
事件委托是利用事件冒泡原理，让节点的父级代为执行事件。而不需要循环遍历元素的子节点，大大减少dom操作；
缺点：
1.不适应所有的事件，只适用于支持事件冒泡的事件
2.原理上执行就近委托
举个例子：100个li都有相同的点击事件，那么常见的方法是for循环100个节点，都执行同一个事件，我们使用事件委托的话，让它的父级ul做事件处理，当点击li时，事件会冒泡到ul上，这是我们定义的事件就会执行啦。
当然，为了防止父级点击事件也生效，需要判断event.target的值。下面是示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
// 不使用事件委托
/*var oLi = document.getElementsByTagName('li');
for(let i=0;i<oLi.length;i++){
oLi[i].onclick = function(){
alert(i)
}
}*/
//使用事件委托
var oUl = document.getElementsByTagName('ul')[0];
oUl.onclick = function (ev = window.event) {
let target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() === 'li'){
alert(target.innerHTML);
}
}
</script>
</body>
</html>
