DOM Events Basics

// Method 1: Inline event handler (not recommended)
// <button onclick="handleClick()">Click</button>

// Method 2: addEventListener (recommended)
const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
    console.log('Button clicked!');
    console.log('Event:', event);
    console.log('Target:', event.target);
});

// Method 3: Named function
function handleClick(event) {
    console.log('Clicked!', event.target);
}

button.addEventListener('click', handleClick);

// Method 4: Arrow function
button.addEventListener('click', (e) => {
    console.log('Arrow function handler');
});

// Method 5: Multiple events
button.addEventListener('click', handleClick);
button.addEventListener('mouseenter', function() {
    console.log('Mouse entered');
});
button.addEventListener('mouseleave', function() {
    console.log('Mouse left');
});

// Method 6: Remove event listener
button.removeEventListener('click', handleClick);

// Method 7: Event object properties
button.addEventListener('click', function(e) {
    console.log('Type:', e.type);
    console.log('Target:', e.target);
    console.log('Current Target:', e.currentTarget);
    console.log('Timestamp:', e.timeStamp);
    console.log('Bubbles:', e.bubbles);
    console.log('Cancelable:', e.cancelable);
});