How to prevent event bubbling in javascript

Event bubbling in JavaScript is a common event propagation mechanism. It means that when an event on an element is triggered, it will propagate upward (parent node) until it reaches the document root node. This process is like A bubble pops up and then spreads outward, so it is called event bubbling. The implementation of the event bubbling mechanism has many benefits. For example, event handlers can be added to the parent element instead of each child element, thereby reducing code redundancy and improving code maintainability and reusability. However, in some cases we may need to prevent element events from bubbling up to avoid affecting other elements. This article will introduce ways to prevent events from bubbling in JavaScript.

1. Event Capture and Event Bubbling

Before we discuss event bubbling in depth, we need to understand two different stages of event propagation: event capturing and event bubbling. Event capture is propagated downward from the document root node to the target element, while event bubbling is propagated upward from the target element to the document root node. In the DOM event model, events are first submitted to the outermost element of the target element, and then propagated inward until an event on the target element is triggered, and then the event is propagated outward from the target element, all the way to the document.

2. Methods to prevent event bubbling

In JavaScript, we can use the preventDefault() and stopPropagation() methods to prevent event propagation. The Event.preventDefault() method is used to prevent the default behavior of the event, such as preventing jumping to a new page when a link is clicked. The stopPropagation() method is used to prevent event propagation, thereby preventing event bubbling or event capture. It can be called within an event handler to stop the propagation of event bubbling or event capture.

1. Use the event.stopPropagation() method

This method can prevent the further propagation of an event and prevent any parent element from capturing events of other elements. When an event is triggered, it stops propagating further and other event handlers are not called.

The sample code is as follows:

document.querySelector('#child').addEventListener('click', function(event) {
  console.log('child clicked');
  event.stopPropagation();
})

document.querySelector('#parent').addEventListener('click', function(event) {
  console.log('parent clicked');
})

In this example, when the child element is clicked, the event stops being delivered and the parent element's event handler is not triggered.

2. Use the event.preventDefault() method

This method only prevents the default behavior of the event, but does not prevent the event from bubbling. The sample code is as follows:

document.querySelector('a').addEventListener('click', function(event) {
  console.log('link clicked');
  event.preventDefault();
})

document.querySelector('div').addEventListener('click', function(event) {
  console.log('div clicked');
})

In this example, when the link is clicked, the event handler prints a message and prevents jumping to a new page. However, it will still be passed to the event handler of the parent element (the div element).

3. Prevent event bubbling and default behavior

Sometimes, we need to prevent the default behavior and bubbling process of an event at the same time. In this case, we can call the preventDefault() and stopPropagation() methods.

The sample code is as follows:

document.querySelector('a').addEventListener('click', function(event) {
  console.log('link clicked');
  event.preventDefault();
  event.stopPropagation();
})

document.querySelector('div').addEventListener('click', function(event) {
  console.log('div clicked');
})

In this example, when a link is clicked, the event handler calls the preventDefault() and stopPropagation() methods, thereby stopping the default behavior of the event and preventing it Bubbling upward. Therefore, the event handler of the div element is not called.

3. Summary

In this article, we introduced the method of preventing event bubbling in JavaScript, that is, using the stopPropagation() and preventDefault() methods. We also covered the difference between event bubbling and event capturing. When we need to prevent the event from bubbling, we can use the stopPropagation() method, and when we need to prevent the default behavior of the event, we can use the preventDefault() method. In some cases, we may need to use both to prevent bubbling of events and default behavior to suit our needs.

The above is the detailed content of How to prevent event bubbling in javascript. For more information, please follow other related articles on the PHP Chinese website!