Event Delegation in JavaScript

1// Method 1: Basic event delegation
2const list = document.getElementById('myList');
3
4// Instead of adding listener to each item
5list.addEventListener('click', function(e) {
6    if (e.target.tagName === 'LI') {
7        console.log('List item clicked:', e.target.textContent);
8        e.target.classList.toggle('active');
9    }
10});
11
12// Method 2: Dynamic content
13const container = document.getElementById('container');
14
15container.addEventListener('click', function(e) {
16    if (e.target.classList.contains('button')) {
17        console.log('Button clicked:', e.target.id);
18    }
19});
20
21// Add new buttons dynamically - they work automatically!
22function addButton(text) {
23    const btn = document.createElement('button');
24    btn.className = 'button';
25    btn.textContent = text;
26    container.appendChild(btn);
27}
28
29// Method 3: Multiple selectors
30container.addEventListener('click', function(e) {
31    if (e.target.matches('.delete-btn')) {
32        deleteItem(e.target.dataset.id);
33    } else if (e.target.matches('.edit-btn')) {
34        editItem(e.target.dataset.id);
35    } else if (e.target.matches('.view-btn')) {
36        viewItem(e.target.dataset.id);
37    }
38});
39
40// Method 4: Closest method
41container.addEventListener('click', function(e) {
42    const card = e.target.closest('.card');
43    if (card) {
44        console.log('Card clicked:', card.dataset.id);
45    }
46});
47
48// Method 5: Event delegation with data attributes
49const table = document.getElementById('dataTable');
50
51table.addEventListener('click', function(e) {
52    const row = e.target.closest('tr');
53    if (row) {
54        const id = row.dataset.id;
55        const action = e.target.dataset.action;
56        
57        if (action === 'delete') {
58            deleteRow(id);
59        } else if (action === 'edit') {
60            editRow(id);
61        }
62    }
63});