MSDN Documentation

1. Introduction to Events

Events are signals that something has happened. In web development, these can be:

• User actions: clicking a button, typing in a field, moving the mouse.
• Browser actions: a page finishing loading, an error occurring.
• Programmatic actions: creating a custom event.

Event handling allows you to write code that executes in response to these events.

2. DOM Events (HTML/JavaScript)

The Document Object Model (DOM) exposes events for most HTML elements. You can attach JavaScript code to these events to make your web pages interactive.

For example, to handle a click event on a button:

const myButton = document.getElementById('myButton');
myButton.onclick = function() {
    alert('Button was clicked!');
};
                

HTML for the above:

<button id="myButton">Click Me</button>
                

3. Adding and Removing Event Listeners

The recommended way to attach event handlers is using addEventListener(). This method allows for multiple handlers for the same event type on the same element and provides more control.

const myButton = document.getElementById('myButton');

function handleClick() {
    console.log('Handler 1: Button clicked!');
}

function handleAnotherClick(event) {
    console.log('Handler 2: Click detected at:', event.clientX, event.clientY);
}

myButton.addEventListener('click', handleClick);
myButton.addEventListener('click', handleAnotherClick);

// To remove a listener:
// myButton.removeEventListener('click', handleClick);
                

You can also use inline event handlers in HTML, but this is generally discouraged for larger applications.

<button onclick="myInlineHandler()">Click Me (Inline)</button>
                

4. The Event Object

When an event occurs, the browser creates an Event object containing detailed information about the event. This object is automatically passed as an argument to your event handler function.

Common properties include:

• type: The type of the event (e.g., 'click', 'mouseover').
• target: The element that triggered the event.
• currentTarget: The element whose event listener triggered the event.
• clientX, clientY: Mouse position relative to the viewport.
• key: The key pressed (for keyboard events).
• preventDefault(): Prevents the default browser action for the event.
• stopPropagation(): Stops the event from bubbling up or capturing down the DOM tree.

const link = document.getElementById('myLink');

link.addEventListener('click', function(event) {
    event.preventDefault(); // Stop the browser from navigating to the URL
    console.log('Link clicked! Event type:', event.type);
    console.log('Target element:', event.target.id);
    console.log('Prevented default action.');
});
                

HTML for the above:

<a href="https://www.microsoft.com" id="myLink">Visit Microsoft</a>
                

5. Event Bubbling and Capturing

When an event occurs on an element, it goes through two phases of propagation:

• Capturing Phase: The event travels down the DOM tree from the window to the target element.
• Bubbling Phase: The event travels back up the DOM tree from the target element to the window.

By default, event listeners are registered for the bubbling phase. You can specify true as the third argument to addEventListener to register for the capturing phase.

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', function(event) {
    console.log('Parent captured!');
}, true); // Capturing phase

child.addEventListener('click', function(event) {
    console.log('Child bubbling!');
}, false); // Bubbling phase (default)

parent.addEventListener('click', function(event) {
    console.log('Parent bubbling!');
}, false); // Bubbling phase
                

If you click the child, you'll see "Parent captured!", then "Child bubbling!", then "Parent bubbling!".

6. Event Delegation

Event delegation is a technique where you attach a single event listener to a parent element to handle events from multiple child elements. This is particularly useful for dynamically added elements or large lists.

Instead of adding a listener to each list item, you add one to the parent `

`.

const list = document.getElementById('myList');

list.addEventListener('click', function(event) {
    // Check if the clicked element is a list item
    if (event.target.tagName === 'LI') {
        console.log('Clicked list item:', event.target.textContent);
        // You can perform actions based on which LI was clicked
    }
});
                

HTML for the above:

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
                

• Item 1
• Item 2
• Item 3

(Check console for output when clicking list items)

7. Keyboard Events

These events are triggered when the user interacts with the keyboard:

• keydown: Fires when a key is pressed down.
• keypress: Fires when a key that produces a character value is pressed down (deprecated, use `keydown` or `input` for character input).
• keyup: Fires when a key is released.

const inputField = document.getElementById('myInput');

inputField.addEventListener('keydown', function(event) {
    console.log(`Key "${event.key}" pressed down.`);
});

inputField.addEventListener('keyup', function(event) {
    console.log(`Key "${event.key}" released.`);
});
                

HTML for the above:

<input type="text" id="myInput" placeholder="Type here...">
                

8. Mouse Events

These events occur when the user interacts with the mouse:

• click: A button is clicked.
• dblclick: A button is double-clicked.
• mousedown: A mouse button is pressed down.
• mouseup: A mouse button is released.
• mousemove: The mouse pointer moves.
• mouseover: The mouse pointer moves over an element.
• mouseout: The mouse pointer moves out of an element.

9. Form Events

Handle user interactions with form elements:

• submit: A form is submitted.
• change: The value of an input, select, or textarea element changes.
• focus: An element receives focus.
• blur: An element loses focus.

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent default form submission
    const formData = new FormData(form);
    console.log('Form submitted!');
    for (const [key, value] of formData.entries()) {
        console.log(`${key}: ${value}`);
    }
});
                

HTML for the above:

<form id="myForm">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required><br><br>
    <button type="submit">Submit Form</button>
</form>
                

10. Custom Events

You can create and dispatch your own custom events to communicate between different parts of your application.

// Dispatching a custom event
const myElement = document.getElementById('customEventElement');
const customEvent = new CustomEvent('myCustomEvent', {
    detail: { message: 'Hello from custom event!' }
});
myElement.dispatchEvent(customEvent);

// Listening for the custom event
myElement.addEventListener('myCustomEvent', function(event) {
    console.log('Custom event received:', event.detail.message);
});
                

HTML for the above:

<div id="customEventElement">Element for custom events</div>
                

11. Event Handling in Frameworks

Modern JavaScript frameworks like React, Angular, and Vue.js provide their own declarative ways to handle events, often abstracting away some of the lower-level DOM manipulation.

React Example (JSX):

<button onClick={handleClick}>
    Click Me
</button>

// In your component's method:
function handleClick(event) {
    console.log('Button clicked in React!');
}
                

Angular Example (TypeScript/HTML):

<!-- In your component's template -->
<button (click)="onClickMe()">
    Click Me
</button>

<!-- In your component's class -->
export class MyComponent {
    onClickMe() {
        console.log('Button clicked in Angular!');
    }
}
                

Vue.js Example (Vue Template):

<template>
    <button @click="onClickMe">
        Click Me
    </button>
</template>

<script>
export default {
    methods: {
        onClickMe() {
            console.log('Button clicked in Vue!');
        }
    }
}
</script>