Use event bubbling to implement complex interactive functions

How to use event bubbling to achieve complex interactive effects

Event bubbling means that when an event on an element is triggered, it will bubble up to the parent element , then to the grandparent element until the document root element. This feature allows us to more flexibly operate DOM elements and handle events when conducting complex interactions. Next, we will introduce how to use event bubbling to achieve complex interactive effects.

First of all, we need to understand the principle of event bubbling. When an event is triggered, the event handler of the triggering element, the event handler of the parent element, and all the way to the root element will be executed. In this process, we can make conditional judgments based on the type of event and the target element to achieve different interactive effects.

A common application scenario is to achieve the effect of closing the pop-up box by clicking outside the pop-up box. We can add a click event to the entire page or a container element on the page, and determine whether the clicked target element is the pop-up box itself or the content element within the pop-up box. If not, close the pop-up box. The code example is as follows:

document.addEventListener('click', function(event) {
  var modal = document.getElementById('modal');
  var modalContent = document.getElementById('modal-content');
  if (event.target !== modal && event.target !== modalContent) {
    modal.style.display = 'none';
  }
});

In the above code, we determine whether to close the pop-up box by judging whether the target element of the event is equal to the pop-up box element or the content element in the pop-up box. In this way, no matter where you click, as long as it is not an element in the pop-up box, the effect of closing the pop-up box will be triggered.

In addition to closing the pop-up box, we can also use event bubbling to achieve a tab-like effect. Suppose we have a container containing multiple options. When an option is clicked, the corresponding content is displayed. We can add a click event to the container element and determine whether the clicked target element is an option in the event handler. If so, display the corresponding content. The code example is as follows:

document.getElementById('options-container').addEventListener('click', function(event) {
  if (event.target.classList.contains('option')) {
    var optionId = event.target.getAttribute('data-id');
    var content = document.getElementById('content-' + optionId);
    content.style.display = 'block';
  }
});

In the above code, we determine whether the clicked target element has a class name named "option" to determine whether it is an option. If so, we can get the content element corresponding to the option through custom attributes and display it. In this way, when you click on different options, the corresponding content will be displayed.

Using event bubbling to achieve complex interactive effects helps simplify the code structure and improve the maintainability of the code. We can flexibly operate DOM elements and handle events by judging the target element and event type of the event, thereby achieving various complex interactive effects. I hope this article helps you understand and apply event bubbling.

The above is the detailed content of Use event bubbling to implement complex interactive functions. For more information, please follow other related articles on the PHP Chinese website!