Suppose I want to handle a click event on an element.

By default an event on a DOM element is fired on the specific element clicked (say, a button) and will be propagated to all its ancestor elements, unless it’s stopped.

I want the event to be handled in my event handler and stop there.

You can stop the propagation by calling the stopPropagation() method of an Event object, usually at the end of the event handler:

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
  // process the event
  // ...

  event.stopPropagation()
})

Lessons in this unit:

0:	Introduction
1:	Handling events
2:	The `DOMContentLoaded` event
3:	The `event` object
4:	Mouse events
5:	Keyboard events
6:	`preventDefault()`
7:	▶︎ Stopping event propagation
8:	Bubbling and capturing
9:	Form submit event
10:	Input fields events
11:	Creating custom events
12:	Keyboard Events
13:	Mouse Events
14:	Touch Events
15:	Form Events