事件委托
Posted 郭郭郭牧鑫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件委托相关的知识，希望对你有一定的参考价值。
什么是事件委托？
对于每一个元素我们都要绑定一个事件，这样对于资源开销很大，对于每一个类元素都要for循环遍历一次，开发成本高，所以可以用事件委托来解决上面的问题
事件委托是一种提高程序性能，降低内存空间的技术手段，它利用了事件冒泡的特性，只需要在某个祖先元素上注册一个事件，就能管理其所有后代元素上同一类型的事件。用一个例子来描述委托，先创建一个html文档，包含一个容器元素，通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件
事件委托的原理：
原理: 利用冒泡的原理，把事件加到父级上，触发执行效果。
<body>
<div>
<p>1-1-1</p>
<p>2-2-2</p>
<p>3-3-3</p>
<p>4-4-4</p>
<p>5-5-5</p>
<h1>1-1-1</h1>
<h1>1-1-1</h1>
<h1>1-1-1</h1>
<p>6-6-6</p>
<p>7-7-7</p>
<p>8-8-8</p>
<p>9-9-9</p>
<p>10-10-10</p>
</div>
<script>
// 利用事件委托，减少事件数量
var div = document.getElementsByTagName('div')[0];
div.onclick = function(e) {
var dom = e.target;
if (dom.tagName.toUpperCase() === 'P') {
dom.style.backgroundColor = 'red';
} else if (dom.tagName.toUpperCase() === 'H1') {
dom.style.backgroundColor = 'green';
}
}
// 利用事件委托，可以预言未来元素，为新元素绑定事件
// 创建一个新成员 新创建的元素也可以使用事件委托
var newH1 = document.createElement('h1');
newH1.innerHTML = '新的h1';
div.appendChild(newH1);
</script>事件委托的好处：
1.减少事件数量，提高性能
2.预测未来元素，新添加的元素仍然可以触发该事件
3.避免内存外泄，在低版本的IE中，防止删除元素而没有移除事件而造成的内存溢出
以上是关于事件委托的主要内容，如果未能解决你的问题，请参考以下文章