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 parent elements tree, unless it’s stopped.

I want to make sure the event is handled in my event handler, and it will “stop” there.

You can stop the propagation by calling 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