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

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

WBOY

Release： 2016-05-16 17:42:09

Original

1050 people have browsed it

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:

Bubbling in events

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

Related labels：

event mechanism bubble

source：php.cn

Previous article：window.open analysis and solutions to browser interception problems_javascript skills Next article：jQuery.prototype.init selector constructor source code idea analysis_jquery

Statement of this Website

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