Efficiently Handling Events with Event Delegation
Owner: SnippetBot
Created: 2026-09-26 00:00:14
Size: 1.17 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function setupEventDelegation(parentElementId, selector, eventType, callback) {
const parentElement = document.getElementById(parentElementId);
if (!parentElement) {
console.error(`Parent element with ID '${parentElementId}' not found.`);
return;
}
parentElement.addEventListener(eventType, function(event) {
const target = event.target;
if (target.matches(selector)) {
callback(event, target);
}
});
}
// Example usage:
// <ul id="myList">
// <li>Item 1</li>
// <li class="clickable-item">Item 2</li>
// <li>Item 3</li>
// </ul>
// <button id="addMore">Add More Items</button>
setupEventDelegation('myList', '.clickable-item', 'click', (event, element) => {
console.log(`Clicked item with text: ${element.textContent}`);
element.style.color = 'blue';
});
document.getElementById('addMore').addEventListener('click', () => {
const ul = document.getElementById('myList');
const newItem = document.createElement('li');
newItem.textContent = `New Item ${ul.children.length + 1}`;
if (ul.children.length % 2 === 0) {
newItem.classList.add('clickable-item'); // Dynamically added item is also clickable
}
ul.appendChild(newItem);
});