Explain event bubbling and how one may prevent it

Event bubbling is a mechanism in the Document Object Model (DOM) where events propagate through an element's ancestors in the DOM tree. When an event is fired on an element, it first runs the handlers on it, and then on its parent, and then all the way up on other ancestors. This process continues until it reaches the root of the document, or until the propagation is explicitly stopped.

To visualize this, consider a nested structure of elements: if you have a structure like FORM > DIV > P and you click on the <p> element, the click event will first trigger the event handler on <p>, then on <div>, and finally on <form>, before continuing upwards until it either reaches the root or is stopped[4][5].

This behavior is the default for most events in the DOM. It allows for a form of event delegation, where a single event handler on a parent element can listen for events that originate from its descendants, thereby avoiding the need to attach event handlers to each descendant individually[3][5].

However, there are situations where you might not want an event to bubble up the DOM tree. For instance, if you have a specific interaction on a child element that should not trigger a parent element's event handler, you would need to prevent event bubbling.

To prevent event bubbling, you can use the stopPropagation() method on the event object within an event handler. When called, this method stops the event from propagating up the DOM tree, ensuring that no further handlers are called beyond the current one[12][13].

Here's an example of how to use stopPropagation() in JavaScript:

element.addEventListener('click', function(event) {
  // Your code here
  // ...
  
  // This will stop the event from bubbling up further
  event.stopPropagation();
});

In th...