Event Types Get Certified

JavaScript provides a rich set of event types that cover almost every kind of user interaction and browser activity. Choosing the right event type is essential for building responsive and accessible interfaces.

This lesson is a practical reference of the most important event types, grouped by category, with short simulated examples so you can see the data each event carries.

Mouse Events

click / dblclick

What this code does: Click and double-click are the most common mouse events.

const handleClick = function(event) {
    console.log('Click at', event.clientX, event.clientY);
};
const handleDblClick = function(event) {
    console.log('Double-click detected');
};

handleClick({ clientX: 120, clientY: 80 });
handleDblClick({});

mousedown / mouseup

What this code does: These fire when a mouse button is pressed or released.

const handleMouseDown = e => console.log('Button pressed:', e.button);
const handleMouseUp   = e => console.log('Button released');

handleMouseDown({ button: 0 }); // left button
handleMouseUp({});

mouseenter / mouseleave

What this code does: Prefer these over mouseover/mouseout when you do not want bubbling.

const handleEnter = () => console.log('Mouse entered element');
const handleLeave = () => console.log('Mouse left element');

handleEnter();
handleLeave();

mousemove

What this code does: Fires continuously while the pointer moves over an element.

const handleMove = function(event) {
    console.log(`Pointer at (${event.clientX}, ${event.clientY})`);
};
handleMove({ clientX: 240, clientY: 160 });

Keyboard Events

keydown / keyup

What this code does: keydown fires when a key is pressed; keyup when it is released.

const handleKeyDown = function(event) {
    console.log('Key down:', event.key);
    if (event.ctrlKey) console.log('Ctrl is held');
};
const handleKeyUp = function(event) {
    console.log('Key up:', event.key);
};

handleKeyDown({ key: 'Enter', ctrlKey: true });
handleKeyUp({ key: 'Enter' });

Form Events

input / change

What this code does: input fires on every change; change fires when the value is committed.

const handleInput = e => console.log('Live value:', e.target.value);
const handleChange = e => console.log('Committed value:', e.target.value);

handleInput({ target: { value: 'Hel' } });
handleInput({ target: { value: 'Hello' } });
handleChange({ target: { value: 'Hello' } });

submit / reset

What this code does: submit fires when a form is submitted; reset when it is cleared.

const handleSubmit = function(event) {
    if (event.preventDefault) event.preventDefault();
    console.log('Form submitted (default prevented)');
};
const handleReset = () => console.log('Form was reset');

handleSubmit({ preventDefault() {} });
handleReset();

focus / blur

What this code does: focus and blur do not bubble. Use focusin/focusout when you need bubbling.

const handleFocus = e => console.log('Focused:', e.target.id);
const handleBlur  = e => console.log('Blurred:', e.target.id);

handleFocus({ target: { id: 'email' } });
handleBlur({ target: { id: 'email' } });

Drag Events

What this code does: Basic drag-and-drop lifecycle: start → drag → drop → end.

const handleDragStart = e => console.log('Drag started on', e.target.id);
const handleDrag      = () => console.log('Dragging…');
const handleDrop      = e => console.log('Dropped on', e.target.id);
const handleDragEnd   = () => console.log('Drag ended');

handleDragStart({ target: { id: 'item-1' } });
handleDrag();
handleDrop({ target: { id: 'drop-zone' } });
handleDragEnd();

Window Events

load / resize / scroll

What this code does: Common window-level events for page readiness and layout changes.

const handleLoad   = () => console.log('Page fully loaded');
const handleResize = e => console.log(`Window: ${e.innerWidth}×${e.innerHeight}`);
const handleScroll = e => console.log('Scroll Y:', e.scrollY);

handleLoad();
handleResize({ innerWidth: 1280, innerHeight: 720 });
handleScroll({ scrollY: 340 });

Touch Events

What this code does: Basic touchstart / touchend for mobile support.

const handleTouchStart = e => {
    console.log('Touch began');
    console.log('Touches:', e.touches ? e.touches.length : 1);
};
const handleTouchEnd = () => console.log('Touch ended');

handleTouchStart({ touches: [1, 2] });
handleTouchEnd();

Media Events

play

What this code does: Play fires when media (audio/video) starts or resumes playback.

// Play event
const handlePlay = function(event) {
    console.log('Media playback started');
    console.log('Current time:', event.target.currentTime);
};

const playEvent = {
    type: 'play',
    target: {
        currentTime: 0,
        duration: 120
    }
};

handlePlay(playEvent);

pause

What this code does: Pause fires when media playback is paused.

// Pause event
const handlePause = function(event) {
    console.log('Media playback paused');
    console.log('Paused at:', event.target.currentTime, 'seconds');
};

const pauseEvent = {
    type: 'pause',
    target: {
        currentTime: 45.5,
        duration: 120
    }
};

handlePause(pauseEvent);

ended

What this code does: Ended fires when media reaches the end of its duration.

// Ended event
const handleEnded = function(event) {
    console.log('Media playback ended');
    console.log('Duration:', event.target.duration, 'seconds');
};

const endedEvent = {
    type: 'ended',
    target: {
        currentTime: 120,
        duration: 120
    }
};

handleEnded(endedEvent);

volumechange

What this code does: Volumechange fires when the media volume or mute state changes.

// Volumechange event
const handleVolumeChange = function(event) {
    console.log('Volume changed');
    console.log('Volume:', event.target.volume);
    console.log('Muted:', event.target.muted);
};

const volumeChangeEvent = {
    type: 'volumechange',
    target: {
        volume: 0.7,
        muted: false
    }
};

handleVolumeChange(volumeChangeEvent);

Event Types Reference Table

Category	Event Type	Description	Bubbles
Mouse	click	User clicks on element	Yes
Mouse	dblclick	User double-clicks	Yes
Mouse	mousedown	Mouse button pressed	Yes
Mouse	mouseup	Mouse button released	Yes
Mouse	mouseenter	Mouse enters element	No
Mouse	mouseleave	Mouse leaves element	No
Mouse	mouseover	Mouse over element	Yes
Mouse	mouseout	Mouse out of element	Yes
Mouse	mousemove	Mouse moves	Yes
Keyboard	keydown	Key pressed down	Yes
Keyboard	keyup	Key released	Yes
Form	submit	Form submitted	Yes
Form	reset	Form reset	Yes
Form	input	Input value changes	Yes
Form	change	Value changes and loses focus	Yes
Form	focus	Element receives focus	No
Form	blur	Element loses focus	No
Drag	drag	Element is being dragged	Yes
Drag	dragstart	Drag operation starts	Yes
Drag	dragend	Drag operation ends	Yes
Drag	drop	Element dropped	Yes
Window	load	Page fully loaded	No
Window	resize	Window resized	No
Window	scroll	Page scrolled	No
Touch	touchstart	Touch begins	Yes
Touch	touchend	Touch ends	Yes
Media	play	Media starts playing	No
Media	pause	Media paused	No

Practical Example: Event Type Detection

What this code does: A reusable logger that prints type, target, and other event details.

// Universal event logger
const logEvent = function(event) {
    console.log('='.repeat(40));
    console.log('Event Type:', event.type);
    console.log('Target:', event.target ? event.target.id : 'N/A');
    console.log('Timestamp:', event.timeStamp || Date.now());
    
    // Mouse events
    if (event.clientX !== undefined) {
        console.log('Mouse Position:', event.clientX, event.clientY);
    }
    
    // Keyboard events
    if (event.key) {
        console.log('Key:', event.key);
        console.log('Modifiers - Ctrl:', event.ctrlKey, 'Shift:', event.shiftKey);
    }
    
    // Form events
    if (event.target && event.target.value !== undefined) {
        console.log('Input Value:', event.target.value);
    }
    
    console.log('='.repeat(40));
};

// Simulate different event types
const events = [
    { type: 'click', clientX: 100, clientY: 150, target: { id: 'btn1' }, timeStamp: 1000 },
    { type: 'keydown', key: 'Enter', ctrlKey: true, shiftKey: false, target: { id: 'input1' }, timeStamp: 2000 },
    { type: 'input', target: { id: 'nameField', value: 'John Doe' }, timeStamp: 3000 }
];

console.log('Testing multiple event types:');
console.log('');

events.forEach(logEvent);

Best Practices for Event Types

Choose the most specific event type for your use case.
Use mouseenter/mouseleave instead of mouseover/mouseout when you don’t want bubbling.
Prefer input over keyup for text input fields to capture all changes.
Use focusin/focusout when you need bubbling behavior.
Be aware of which events bubble and which don’t.
Use passive event listeners for scroll and touch events to improve performance.
Consider touch events for mobile-friendly applications.
Clean up event listeners when they’re no longer needed.

Common Mistakes With Event Types

Using mouseover when mouseenter would be better (avoiding unwanted bubbling).
Forgetting that some events don’t bubble (like focus and blur).
Using deprecated events like keypress.
Not preventing default behavior when necessary (e.g., form submit, link click).
Attaching expensive handlers to frequently-firing events (like scroll or mousemove).
Not considering mobile touch events in addition to mouse events.

Quick Summary

JavaScript provides many event types for different interactions.
Mouse events include click, dblclick, mouseenter, mouseleave, and more.
Keyboard events are keydown and keyup.
Form events include submit, input, change, focus, and blur.
Drag events enable drag-and-drop functionality.
Window events respond to browser window actions.
Touch events handle mobile device interactions.
Animation and transition events track CSS animations.
Media events control audio and video playback.
Some events bubble, others don’t.
Choose the right event type for your specific use case.

Try It Yourself

Experiment with different event types. Create handlers for various events and see how they work.

What this code does: Practice: runs a set of simulated events through a shared handler to compare types.

// Event type testing
const events = {
    click: { type: 'click', clientX: 100, clientY: 150 },
    keydown: { type: 'keydown', key: 'a', ctrlKey: false },
    input: { type: 'input', target: { value: 'test' } },
    submit: { type: 'submit', target: { id: 'form1' } },
    mouseenter: { type: 'mouseenter', target: { id: 'box1' } }
};

const handleEvent = function(event) {
    console.log('Event:', event.type);
    console.log('Data:', JSON.stringify(event, null, 2));
    console.log('---');
};

console.log('Testing different event types:');
console.log('');

Object.keys(events).forEach(function(key) {
    handleEvent(events[key]);
});

Tip: Understanding all the different event types available in JavaScript will help you build more interactive and responsive web applications. Each event type serves a specific purpose, so choose wisely based on your needs.

Mastering JavaScript event types is essential for creating dynamic user interfaces. Knowing when and how to use each event type will make you a more effective developer.

🧪 Test Your JavaScript Code

Edit the code on the left and click “Run Code” to see the console output on the right.

📝 JavaScript Code

👁 Console Output

Click “Run Code” to see the output here.

Ctrl + Enter to run code Esc to close