概念: js事件委托是通过给需要委托元素的父元素添加一个监听事件,利用了事件冒泡的原理。当子元素事件触发时会冒泡到父元素上。
<ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
var ul = document.getElementById('ul'); ul.onclick = function(e) { var e = e || window.event; // 处理IE兼容 var target = e.target ? e.target : e.srcElement; //处理IE兼容 if (target.nodeName.toLowerCase() === 'li') { alert(target.innerHTML); } }
事件委托和普通事件邦定区别:
1、普通事件绑定是给每个元素都绑定一个事件,动态添加的元素无法被绑定上事件。事件委托是给它们共同的父元素绑定一个监听事件,利用冒泡事件对子元素的事件捕获
2、普通事件绑定事件越多,性能越差。事件委托能减少内存的使用,优化性能。