DOM Events

Handling user interactions with JavaScript

⚡ What are DOM Events?

DOM events are actions that happen in the browser - like clicking a button, typing in a text field, or moving the mouse. JavaScript can "listen" for these events and respond to them. 


// Basic event example
document.getElementById('myButton').onclick = function() {
    alert('Button was clicked!');
};

Try it:

Common Event Types

👆

Mouse Events

Click, hover, and mouse movements 

onclick, onmouseover, onmouseout
⌨️

Keyboard Events

Key presses and releases 

onkeydown, onkeyup, onkeypress
📝

Form Events

Form submissions and input changes 

onsubmit, onchange, onfocus
🌐

Window Events

Page loading and resizing 

onload, onresize, onscroll

🔹 Click Events

The most common event - responding to button clicks: 

// Method 1: Direct assignment
document.getElementById('btn1').onclick = function() {
    alert('Method 1: Direct assignment');
};

// Method 2: Using addEventListener (recommended)
document.getElementById('btn2').addEventListener('click', function() {
    alert('Method 2: addEventListener');
});

// Method 3: Arrow function
document.getElementById('btn3').addEventListener('click', () => {
    console.log('Method 3: Arrow function');
});

Output:

🔹 Mouse Events

Respond to different mouse actions: 

const box = document.getElementById('mouseBox');

// Mouse enter
box.onmouseenter = function() {
    this.style.backgroundColor = 'lightblue';
    this.textContent = 'Mouse is over me!';
};

// Mouse leave
box.onmouseleave = function() {
    this.style.backgroundColor = 'lightgray';
    this.textContent = 'Mouse left me!';
};

// Double click
box.ondblclick = function() {
    this.style.backgroundColor = 'red';
    this.textContent = 'Double clicked!';
};

Output:

Hover over me!

🔹 Keyboard Events

Capture keyboard input: 

const input = document.getElementById('keyInput');
const output = document.getElementById('keyOutput');

// Key press event
input.onkeyup = function(event) {
    output.textContent = `You typed: ${event.key}`;
    
    // Special keys
    if (event.key === 'Enter') {
        output.textContent += ' (Enter key pressed!)';
    }
    
    if (event.key === 'Escape') {
        this.value = '';
        output.textContent = 'Input cleared!';
    }
};

Output:

Start typing...

🔹 Form Events

Handle form interactions: 

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

// Form submission
form.onsubmit = function(event) {
    event.preventDefault(); // Prevent page reload
    alert(`Hello, ${nameInput.value}!`);
};

// Input focus
nameInput.onfocus = function() {
    this.style.backgroundColor = 'lightyellow';
};

// Input blur (lose focus)
nameInput.onblur = function() {
    this.style.backgroundColor = 'white';
    if (this.value === '') {
        this.style.borderColor = 'red';
    } else {
        this.style.borderColor = 'green';
    }
};

Output:

🔹 Event Object

Get information about the event: 

document.getElementById('infoButton').addEventListener('click', function(event) {
    console.log('Event type:', event.type);
    console.log('Target element:', event.target);
    console.log('Mouse position:', event.clientX, event.clientY);
    console.log('Timestamp:', event.timeStamp);
    
    // Show info on page
    const info = `
        Event: ${event.type}
        Target: ${event.target.tagName}
        Position: (${event.clientX}, ${event.clientY})
    `;
    alert(info);
});

Output:

🧠 Test Your Knowledge

Which method is recommended for adding event listeners?