JavaScript事件委托是一种利用事件冒泡的机制,通过将事件委托给父元素来管理子元素上的事件。
事件委托的原理是将子元素的事件委托给父元素处理。当一个事件被触发时,它会首先在子元素上触发,然后逐级向上冒泡,直到到达document对象。在这个过程中,我们可以通过事件对象的target属性来获取到触发事件的元素。
使用事件委托需要先找到共同的父元素,然后在父元素上绑定事件。在事件处理函数中,判断事件的target属性是否是我们需要的元素,如果是就执行相应的操作。
// HTML代码
<ul id="list">
<li class="item">item1</li>
<li class="item">item2</li>
<li class="item">item3</li>
</ul>
// JavaScript代码
const list = document.querySelector('#list');
list.addEventListener('click', function(event) {
if (event.target.classList.contains('item')) {
console.log(event.target.textContent);
}
});
上述代码中,我们将事件委托给ul元素,当ul元素内任何一个li元素被点击时,会触发ul元素上的click事件,然后在事件处理函数中判断点击的元素是否是li元素,如果是就打印该元素的文本内容。