The concepts and functions of event bubbling and event delegation

What are JS event bubbling and event delegation? Specific code examples are needed

Event bubbling (Event Bubbling) and event delegation (Event Delegation) are two types of JS An important concept related to event processing. This article will introduce both concepts in detail and provide specific code examples to explain their usage and implementation principles.

1. Event Bubbling

Event bubbling means that when an event (such as a click event) occurs on an element, if the element defines an event handler, the event will The event will be triggered first, and then the event will propagate from the current element to the parent element level by level until it reaches the root element of the document.

The event bubbling mechanism allows us to easily add the same event handler to multiple child elements of a parent element without having to define separate event handlers for each child element. This simplifies the code and makes it more maintainable.

The following is a code example for event bubbling:

HTML code:

<div id="parent">
  <div id="child1">子元素1</div>
  <div id="child2">子元素2</div>
</div>

JS code:

const parent = document.querySelector('#parent');
const child1 = document.querySelector('#child1');
const child2 = document.querySelector('#child2');

parent.addEventListener('click', function(event) {
  console.log('触发父元素的点击事件');
});

child1.addEventListener('click', function(event) {
  console.log('触发子元素1的点击事件');
  event.stopPropagation();
});

child2.addEventListener('click', function(event) {
  console.log('触发子元素2的点击事件');
  event.stopPropagation();
});

In the above code, when we When clicking child element 1 or child element 2, the console will output in turn:

触发子元素1的点击事件
触发父元素的点击事件

Only when the event bubbles to the parent element, the event handler of the parent element will be triggered. Stop the event from bubbling by calling event.stopPropagation().

2. Event Delegation

Event delegation refers to binding the event handler to the parent element and determining whether to Perform the appropriate action.

The advantage of event delegation is that when a new child element is added to the parent element, there is no need to bind an event handler to the new child element separately, but the event is handled directly through the parent element. . This can greatly reduce the number of event handlers and improve performance.

The following is a code example of event delegation:

HTML code:

<ul id="parent">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

JS code:

const parent = document.querySelector('#parent');

parent.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    const textContent = event.target.textContent;
    console.log('点击了项目：' + textContent);
  }
});

In the above code, when we click When any li element is clicked, the console will output the text content of the clicked item. No matter how many li elements are added subsequently, their click events will be handled by the parent element.

The principle of event delegation is implemented through event bubbling. The event first bubbles up to the parent element, and then is judged based on the original target of the event to determine whether the corresponding action needs to be performed.

Summary:

Event bubbling and event delegation are important concepts related to event processing in JS. Event bubbling allows us to easily add the same event handler to multiple child elements of the parent element, improving code reusability; event delegation binds the event handler to the parent element, based on the original target of the event. To decide whether to perform the corresponding operation, improve performance and reduce the amount of code. In actual development, if you use event bubbling and event delegation appropriately according to your needs, you can write elegant and efficient code.

The above is the detailed content of The concepts and functions of event bubbling and event delegation. For more information, please follow other related articles on the PHP Chinese website!