JavaScript事件委托是一种设计模式,通过将事件处理程序添加到一个父元素而不是给每个子元素添加事件处理程序来提高性能。当子元素触发事件时,事件会冒泡到父元素,然后通过事件委托的方式来触发相应的事件处理程序。
通过事件委托,可以减少页面中事件处理程序的数量,提高页面性能。此外,当页面中动态添加或删除子元素时,不需要重新绑定事件处理程序,因为事件处理程序是绑定在父元素上的。
示例代码:
// HTML结构
<ul id="parent-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
// JavaScript代码
document.getElementById('parent-list').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
console.log('You clicked on item: ' + event.target.innerHTML);
}
});
在上面的代码中,我们给父元素 ul
添加了一个点击事件处理程序,当点击子元素 li
时,通过事件委托的方式来触发事件处理程序,从而实现事件委托。