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: