Attaches a single event listener to a parent element and handles events from matching descendant elements via event delegation. More efficient than attaching listeners to many individual elements, and works for elements added dynamically to the DOM after the listener is registered.
JavaScript
function delegate(parent, eventType, selector, handler) {
parent.addEventListener(eventType, (event) => {
const target = event.target.closest(selector);
if (target && parent.contains(target)) {
handler.call(target, event);
}
});
}
// Usage
const list = document.querySelector('#item-list');
delegate(list, 'click', '.delete-btn', function (e) {
e.preventDefault();
this.closest('li').remove();
});
delegate(list, 'click', 'a.item-link', function (e) {
console.log('Item clicked:', this.dataset.id);
});Save your own code snippets
Create a free account and build your private vault. Share publicly whenever you want.