DOM Event Model and Types

Basic Event Registration

There are multiple ways to register event listeners in JavaScript:

Method 1: addEventListener (Recommended)

// Select the element
const button = document.getElementById('submit-button');

// Add an event listener
button.addEventListener('click', function(event) {
    console.log('Button was clicked!');
    console.log('Event object:', event);
});

Method 2: Event Handler Property

// Select the element
const input = document.getElementById('username');

// Assign a function to the event handler property
input.onchange = function(event) {
    console.log('Input value changed to:', this.value);
};

Method 3: Inline HTML Attribute (Not Recommended)

<button onclick="handleClick()">Click Me</button>

<script>
function handleClick() {
    console.log('Button was clicked!');
}
</script>

Event Object Type-Specific Properties

Different event types provide additional properties specific to the type of interaction:

Mouse Events

document.getElementById('image').addEventListener('mousemove', function(event) {
    // Mouse coordinates relative to the viewport
    console.log('Client coordinates:', event.clientX, event.clientY);
    
    // Mouse coordinates relative to the document
    console.log('Page coordinates:', event.pageX, event.pageY);
    
    // Mouse coordinates relative to the target element
    console.log('Element coordinates:', event.offsetX, event.offsetY);
    
    // Which mouse button was pressed (0: left, 1: middle, 2: right)
    console.log('Button pressed:', event.button);
    
    // Modifier keys held during the event
    console.log('Ctrl key?', event.ctrlKey);
    console.log('Shift key?', event.shiftKey);
    console.log('Alt key?', event.altKey);
});

Keyboard Events

document.getElementById('input-field').addEventListener('keydown', function(event) {
    // The key that was pressed
    console.log('Key pressed:', event.key);
    
    // Key code (deprecated but still used in some contexts)
    console.log('Key code:', event.keyCode);
    
    // For special keys like Ctrl, Shift, Alt
    console.log('Ctrl key?', event.ctrlKey);
    console.log('Shift key?', event.shiftKey);
    console.log('Alt key?', event.altKey);
    
    // Prevent typing in the field for certain keys
    if (event.key === '@' || event.key === '#') {
        event.preventDefault();
        console.log('Special character blocked');
    }
});

Form Events

document.getElementById('signup-form').addEventListener('submit', function(event) {
    // Prevent the form from submitting normally
    event.preventDefault();
    
    // Form data
    const formData = new FormData(this);
    
    // Log form values
    for (const [name, value] of formData.entries()) {
        console.log(`${name}: ${value}`);
    }
    
    // Validate and submit via AJAX instead
    validateAndSubmit(formData);
});

Creating and Dispatching Custom Events

// Create a custom event
const productAddedEvent = new CustomEvent('productAdded', {
    detail: {
        productId: 12345,
        productName: 'Wireless Headphones',
        price: 79.99,
        quantity: 1
    },
    bubbles: true,     // Whether the event bubbles up through the DOM
    cancelable: true   // Whether the event can be canceled
});

// Dispatch the event on an element
document.getElementById('shopping-cart').dispatchEvent(productAddedEvent);

// Listen for the custom event
document.getElementById('shopping-cart').addEventListener('productAdded', function(event) {
    console.log('Product added to cart:', event.detail.productName);
    updateCartCount(event.detail.quantity);
    updateCartTotal(event.detail.price * event.detail.quantity);
});

// You can also create simpler events
const simpleEvent = new Event('refresh', {
    bubbles: true,
    cancelable: false
});

document.getElementById('data-container').dispatchEvent(simpleEvent);