JavaScript Events Guide

1. Click Events

Definition

Click events occur when a user clicks an element using a pointing device (e.g., mouse or touch).

Important Points

• Triggered on a single click or double click.
• Commonly used for buttons, links, and interactive elements.
• Provides event object with details like target element and coordinates.

Types

• click: Single click event.
• dblclick: Double click event.

Syntax

element.addEventListener('click', (event) => {
    // Handle click event
});
element.addEventListener('dblclick', (event) => {
    // Handle double click event
});
    

Example

const button = document.querySelector('button');
button.addEventListener('click', (e) => {
    console.log('Button clicked!');
    console.log('Target:', e.target);
});
button.addEventListener('dblclick', (e) => {
    console.log('Button double-clicked!');
});
    

2. Input Events

Definition

Input events are triggered when the value of an input, select, or textarea element changes.

Important Points

• Fires continuously as the user types or modifies input.
• Useful for real-time validation or dynamic updates.
• Provides the current value through event.target.value.

Types

• input: Fires on any value change.
• change: Fires when value is committed (e.g., on blur).

Syntax

element.addEventListener('input', (event) => {
    // Handle input change
});
element.addEventListener('change', (event) => {
    // Handle value commitment
});
    

Example

const input = document.querySelector('#username');
const output = document.querySelector('p');
input.addEventListener('input', (e) => {
    output.textContent = e.target.value;
});
input.addEventListener('change', (e) => {
    console.log('Value committed:', e.target.value);
});
    

Difference: input vs change

• input: Fires immediately on every change (e.g., each keystroke).
• change: Fires only when the input is committed, typically on blur or Enter key.

3. Focus Events

Definition

Focus events occur when an element gains or loses focus.

Important Points

• Useful for form validation or accessibility enhancements.
• Triggered by user actions like clicking or tabbing.
• Does not bubble up the DOM tree.

Types

• focus: When an element gains focus.
• blur: When an element loses focus.

Syntax

element.addEventListener('focus', (event) => {
    // Handle focus
});
element.addEventListener('blur', (event) => {
    // Handle blur
});
    

Example

const input = document.querySelector('#username');
input.addEventListener('focus', (e) => {
    console.log('Input focused');
    e.target.style.backgroundColor = 'lightyellow';
});
input.addEventListener('blur', (e) => {
    console.log('Input blurred');
    e.target.style.backgroundColor = '';
});
    

Difference: focus vs blur

• focus: Triggered when an element becomes active (e.g., clicked or tabbed into).
• blur: Triggered when an element loses focus (e.g., clicking elsewhere).

4. Form Events

Definition

Form events are triggered by actions within a form, such as submission.

Important Points

• Commonly used to handle form submissions or validate data.
• Use FormData to easily access form data.
• Prevent default submission with event.preventDefault().

Types

• submit: Fires when a form is submitted.

Syntax

form.addEventListener('submit', (event) => {
    event.preventDefault();
    // Handle form submission
});
    

Example

const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    for (const [key, value] of formData.entries()) {
        console.log(`${key}: ${value}`);
    }
});
    

5. Keyboard Events

Definition

Keyboard events occur when a user interacts with the keyboard.

Important Points

• Provides event.key (key value) and event.code (physical key).
• Useful for shortcuts, games, or accessibility features.
• Can be attached to specific elements or the entire window.

Types

• keydown: When a key is pressed.
• keyup: When a key is released.
• keypress: When a key produces a character (deprecated).

Syntax

window.addEventListener('keydown', (event) => {
    // Handle key press
});
window.addEventListener('keyup', (event) => {
    // Handle key release
});
    

Example

window.addEventListener('keydown', (e) => {
    console.log('Key:', e.key, 'Code:', e.code);
    if (e.key === 'Enter') {
        console.log('Enter key pressed!');
    }
});
window.addEventListener('keyup', (e) => {
    console.log('Key released:', e.key);
});
    

Difference: keydown vs keyup vs keypress

• keydown: Fires when a key is pressed, including non-character keys.
• keyup: Fires when a key is released, useful for detecting key release.
• keypress: Fires only for character keys, but is deprecated.