Getting Started with JQurey - An Example of the Bubbling Phenomenon in Event Mechanism_jquery

1. When the user browses the page , the browser will interpret or compile the page code - this process is essentially event-driven, that is, when the page is loaded, a Load event is executed. , in this event, the process of the browser compiling the page code is implemented. After the event is triggered, it is divided into two stages, one is Capture and the other is Bubbing. However, most browsers do not support the capture stage, so after the event is triggered, the bubbling process is often executed.

2. Sample code :

Copy code The code is as follows:

3. Rendering preview:

After clicking:

After clicking once, the number of execution times is shown to be 3 times. This is because the event has a bubbling phenomenon during the execution process, that is, although the click It's a button, but the event of the

element surrounding the button is also triggered. At the same time, the event of the element surrounding the

element is also triggered. The whole process is a bubbling process. How to prevent the bubbling process from happening can be achieved through the stopPropagation() method or return false. Modify the code as:

Copy code The code is as follows:

The effect picture is as follows:

After clicking

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

Previous article：window.open analysis and solutions to browser interception problems_javascript skillsNext article：window.open analysis and solutions to browser interception problems_javascript skills

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills