Quick solution to JS bubbling events_javascript tips

What is a bubbling event?
It is when multiple divs are nested; that is, a parent-child relationship is established. When the parent div and the child div join the onclick event, when After the onclick event of the child div is triggered, the child div performs the corresponding js operation. But the onclick event of the parent div will also be triggered. This results in multiple levels of concurrency of events, leading to page chaos. This is a bubbling event.

Methods to eliminate bubbling events
Prevent JavaScript event bubbling delivery (cancelBubble, stopPropagation)

The following piece of code can well explain what is the bubbling effect and what is the elimination of the bubbling effect

Copy code The code is as follows:

This is parent1 div.

This is child1.

This is parent1 div.

This is parent2 div.

This is child2. Will bubble.

This is parent2 div.

After copying the code directly, when you click child1, not only the child1 dialog box will pop up, but also the parent1 dialog box will pop up

This is a bubbling event

But clicking chile2 will only pop up child2 but not parent2. This is the effect of applying special effects that prevent bubbling events.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn