Browsers respond to many user events, even if your code does not: when the user clicks the
mouse on a hyperlink, the browser follows the link. If an HTML text input element has the
keyboard focus and the user types a key, the browser will enter the user's input. If the
user moves their finger across a touch-screen device, the browser scrolls. If you
register an event handler for events like these, you can prevent the browser from
performing its default action by invoking the preventDefault() method of the event
object. (Unless you registered the handler with the passive option, which makes
preventDefault() ineffective.)
Canceling the default action associated with an event is only one kind of event
cancellation. We can also cancel the propagation of events by calling the
stopPropagation() method of the event object. If there are other handlers defined on the
same object, the rest of those handlers will still be invoked, but no event handlers on
any other object will be invoked after stopPropagation() is called. stopPropagation()
works during the capturing phase, at the event target itself, and during the bubbling
phase. stopImmediatePropagation() works like stopPropagation(), but it also prevents the
invocation of any subsequent event handlers registered on the same object.