← Back to JavaScript Course | Chapter 2: Functions & Objects | Lesson 6 of 10

JS Events

Think of a doorbell, it sits quietly doing nothing until someone presses it, and only then does the chime inside the house react. The button doesn't run on a schedule, it waits for a specific trigger. JavaScript events work the same way, they let your code wait quietly until something specific happens, a click, a mouse movement, a typed character, and only then run in response. This event-driven approach is what makes pages feel alive, and it's exactly how interactive features across cookiescursor.com, from buttons to menus, actually work under the hood.

In this page:

  1. onclick
  2. onmouseover
  3. onchange
  4. addEventListener
  5. The Event Object
Syntax
javascript 
element.addEventListener("eventName", function(event) {
  // handler code
});

<element onclick="handler()">

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

javascript 
<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

javascript 
<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

javascript 
<!-- The onchange attribute below runs this JS whenever the selection changes -->
<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

javascript 
<button>Click Me</button>
<script>
  // Declare the constant `btn`, set to `document.querySelector("button")`
  const btn = document.querySelector("button");
  // Listen for the `click` event on `btn` and run the handler when it fires
  btn.addEventListener("click", () => console.log("First listener"));
  // Listen for the `click` event on `btn` and run the handler when it fires
  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

javascript 
<button onclick="console.log(event.target)">Click Me</button>
Live Example
Related Topics

JS Events Advanced · JS Objects · JS Object Iterations · JS Functions

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Relying only on inline event attributes like onclick for complex applications, addEventListener scales far better and allows multiple handlers.
  2. Forgetting that the event object passed to a handler contains useful details, like which key was pressed or which element was clicked.
  3. Not understanding event bubbling, which can cause a click handler on a parent element to fire unexpectedly when a child element is clicked.
Chapter Summary
  • 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.
Browser Support

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:

← Previous Lesson JS Object Protection Next Lesson → JS Strings

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.