JS Events
In this page:
onclick
onclick fires whenever an element is clicked, and can be set either as an inline HTML attribute or assigned directly in JavaScript to run a specific function.
Note: onclick works on nearly any visible element, not just buttons, links, images, and divs can all respond to clicks too.
Warning: Setting element.onclick a second time overwrites the first handler entirely, only one function can be assigned this way at a time.
Example: onclick
<button onclick="console.log('Clicked!')">Click Me</button>onmouseover
onmouseover fires when the mouse pointer enters an element's boundaries, commonly paired with onmouseout, which fires when the pointer leaves, to create hover-based effects.
Note: For simple visual hover effects, CSS's :hover is often simpler than JavaScript, save onmouseover for effects that need actual logic.
Warning: onmouseover fires again every time the cursor re-enters a child element inside the same parent, which can trigger it more often than expected.
Example: onmouseover
<div onmouseover="console.log('Mouse entered')" onmouseout="console.log('Mouse left')">Hover over me</div>onchange
onchange fires when a form element's value has been modified and then loses focus, commonly used with dropdowns, checkboxes, and text inputs to react to user selections.
Note: For text inputs, onchange only fires after the field loses focus, use the input event instead if you need to react on every keystroke.
Warning: onchange does not fire while the user is actively typing in a text field, only after they click or tab away from it.
Example: onchange
<select onchange="console.log('Selection changed to', this.value)">
<option value="a">A</option>
<option value="b">B</option>
</select>addEventListener
addEventListener attaches an event handler to an element without overwriting any existing handlers, and lets you attach multiple listeners for the same event, making it the modern, recommended way to handle events.
Note: addEventListener also has a matching removeEventListener, useful for cleaning up handlers you no longer need, like when an element is removed.
Warning: removeEventListener requires the exact same function reference used in addEventListener, an anonymous function cannot be removed this way.
Example: addEventListener
<button>Click Me</button>
<script>
const btn = document.querySelector("button");
btn.addEventListener("click", () => console.log("First listener"));
btn.addEventListener("click", () => console.log("Second listener"));
</script>The Event Object
Every event handler automatically receives an event object as its first argument, containing details about what happened, including which element triggered it, mouse coordinates, or which key was pressed.
Note: event.target is one of the most useful properties, it always refers to the exact element the event actually happened on.
Warning: event.target and this can refer to different elements when using event delegation, understanding the difference avoids confusing bugs.
Example: The Event Object
<button onclick="console.log(event.target)">Click Me</button>- Relying only on inline event attributes like onclick for complex applications, addEventListener scales far better and allows multiple handlers.
- Forgetting that the event object passed to a handler contains useful details, like which key was pressed or which element was clicked.
- Not understanding event bubbling, which can cause a click handler on a parent element to fire unexpectedly when a child element is clicked.
- Events let JavaScript respond to user actions like clicks, mouse movement, and form changes.
- addEventListener is the modern, flexible way to attach event handlers, supporting multiple listeners per element.
- Events bubble upward through parent elements by default, a behavior worth understanding before building complex interactions.
Standard DOM events and addEventListener are supported in every modern browser, forming the foundation of nearly all interactive web pages.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: