Introduction

Events are the bridge between user interactions (clicks, key presses, mouse movements, form submissions, etc.) and your JavaScript code. By listening for and handling events, your web pages can respond dynamically to what the user does. In this post, you’ll learn:

1. What JavaScript events are
2. Common event types
3. How to assign event handlers
4. Event listener methods
5. Best practices and tips

1. What Is a JavaScript Event?

An event is an action or occurrence (often triggered by the user) that the browser recognizes. Examples include:

1. Clicking a button
2. Hovering over an element
3. Typing in an input field
4. Submitting a form
5. Loading a page

When events occur, you can run JavaScript code to respond appropriately—this is called event handling.

2. Common Types of Events

Here are some frequently used event categories:

1. Mouse events: click, dblclick, mouseover, mouseout, mousemove, mousedown, mouseup
2. Keyboard events: keydown, keyup, keypress
3. Form events: submit, change, focus, blur, input
4. Window/document events: load, resize, scroll, DOMContentLoaded, unload
5. Touch & pointer events: touchstart, touchmove, pointerdown, etc.

Each event provides additional context (via an event object) that lets you see what triggered it, which element, key pressed, mouse coordinates, etc.

3. Assigning Event Handlers

You can attach JavaScript functions to events so that the function runs when the event happens.

3.1 Inline Event Handler (HTML attribute)

You can directly place JavaScript inside HTML tags:

While simple, this mixes HTML and script, which can be harder to maintain for larger codebases.

3.2 Assigning via JavaScript (element property)

You can set properties of DOM elements:

Here myFunction is a function reference (not invoked immediately). You could also assign an anonymous function:

3.3 Using addEventListener

The modern, preferred way is to use addEventListener, which lets you attach multiple handlers to the same event and offers more flexibility:

You can also remove listeners when needed:

You can pass additional options (e.g. capture, once, passive) for more control over event behavior.

4. The Event Object

When an event handler runs, the browser passes an event object to the handler function. This object contains useful properties and methods, such as:

1. type — the event type (e.g. "click")
2. target — the DOM element that triggered the event
3. currentTarget — the element whose listener is currently being invoked
4. Mouse coordinates (clientX, clientY, pageX, pageY)
5. Key information (for keyboard events): key, code, altKey, ctrlKey, etc.
6. Methods like preventDefault() (stop default browser behavior) and stopPropagation() (prevent event bubbling)

Example:

5. Event Propagation: Bubbling & Capturing

When an event occurs, it can travel through the DOM hierarchy in two phases:

1. Capturing phase: the event travels from the root down to the target element
2. Bubbling phase: after reaching the target, it bubbles up from the target back to the root

By default, event listeners are in the bubbling phase. Using addEventListener with the { capture: true } option can change that. Understanding propagation is important for controlling if and how parent elements respond to child events.

6. Best Practices & Tips

1. Prefer addEventListener over inline event attributes for separation of concerns
2. Use event delegation (attach listener on a parent) when many child elements share the same behavior
3. Always test event.preventDefault() and stopPropagation() carefully
4. Clean up event listeners (using removeEventListener) when elements are removed to avoid memory leaks
5. Use named functions rather than anonymous ones if you may need to remove them later
6. Use the event object’s properties to make behavior context-aware