1, when the user browsing the page , the browser will explain or compile the page code-this process is essentially through the event to drive, that is, when the page is loaded, execute a Load event, in this event to implement the browser to compile the page code process. The event is triggered into two phases, one is capture (Capture) and the other is bubbling (bubbing), but most browsers do not support the capture phase, so after the event is triggered, the bubbling process is often performed.
2. Sample Code :
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv=" Content-type " Content= "text/html; Charset=utf-8 "/>
Bubbles in <title> events </title>
<script type=" Text/javascript "src=" Jquery-1.8.3.min.js "></script>
<script type=" Text/javascript ">
$ (function () {
var inti=0;
$ ("Body,div, #btnShow"). Click (Function (event) {
inti++;
$ (". Clsshow"). Show (). html ("Hello, Welcome to the jquery world!"). "). Append (" <div> execution Times "+inti+" </div> ");
})
);
</script>
<body>
<div>
<input id = "Btnshow" type= "button" V Alue = "click" class = "btn"/>
</div>
<div class = "Clsshow" ></div>
</body>
& Lt;/html>
3, the effect Chart preview:
After clicking:
Once clicked, the number of executions is displayed 3 times, because the event is bubbling during execution, that is, although the button is clicked, the event of the <div> element outside the button is triggered, while <div> elements of the peripheral <body> The event of the element is also triggered and the whole process is bubbling. How to prevent the bubbling process from occurring, either through the Stoppropagation () method or return False, modify the code to:
Copy Code code as follows:
<script type= "Text/javascript" >
$ (function () {
var inti=0;
$ ("Body,div, #btnShow"). Click (Function (event) {
inti++;
$ (". Clsshow"). Show (). html ("Hello, Welcome to the jquery world!") "). Append (" <div> execution Times "+inti+" </div> ");
Event.stoppropagation (); Block bubbling process
return false;
})
});
</script>
The effect chart is as follows:
After clicking