JavaScript Events and Event Handling

JavaScript events are signals that something happened in the browser: a user clicked a button, typed a key, moved the pointer, focused a field, submitted a form, or the page changed state. JavaScript can listen for these events and run code in response.

For modern JavaScript, the usual pattern is addEventListener(). It keeps behavior out of the HTML and lets the same element have more than one listener.

const button = document.querySelector('#showMessage');
button.addEventListener('click', () => {
  document.querySelector('#message').textContent = 'Button clicked';
});

Adding an Event Listener Top ↑

The listener receives an event object when the event occurs. Use a named function when you may need to remove the listener later, or an arrow/function expression for a small one-off handler.

function handleClick(event) {
  console.log(event.type);
}

const button = document.querySelector('button');
button.addEventListener('click', handleClick);

Inline attributes such as onclick="..." still exist in older code, but keeping JavaScript in script files or script blocks is easier to maintain and scale.

The Event Object Top ↑

The event object describes what happened. Depending on the event type, useful properties can include event.target, event.currentTarget, event.key, pointer coordinates and modifier-key states.

element.addEventListener('click', (event) => {
  console.log(event.target);
  console.log(event.currentTarget);
});

Keyboard Events Top ↑

Use keydown when an action should start as a key is pressed and keyup when the action should happen after release. For key identity, prefer event.key. The older keypress, keyCode and which patterns are retained in this tutorial set only as legacy references.

Mouse and Pointer Events Top ↑

Focus Events Top ↑

Focus matters for forms and keyboard accessibility. An element receives focus when it becomes active and blur when focus moves away. See focus on form controls, blur on form controls and focus/blur help text.

Event Bubbling and Propagation Top ↑

Many events bubble from the original target through its ancestors. This enables event delegation: listen once on a parent instead of attaching a listener to every child.

const list = document.querySelector('#menu');
list.addEventListener('click', (event) => {
  if (event.target.matches('button')) {
    console.log(event.target.textContent);
  }
});

Use event.stopPropagation() only when propagation must genuinely stop; unnecessary use can make larger interfaces harder to reason about.

Preventing Default Browser Actions Top ↑

Some events have a browser action attached to them. For example, submitting a form normally navigates or reloads the page. Call event.preventDefault() only when JavaScript is intentionally replacing that action.

form.addEventListener('submit', (event) => {
  event.preventDefault();
  // Validate or submit with JavaScript here.
});

More Event Tutorials and Demos Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: