I learned an event bubbling mechanism today and thought it was a bit problematic. I tested it myself and shared the results with you, which helps you better understand the event bubbling mechanism.
For example:
<Html>
<Head>
<Script>
Function f1 (){
Alert ('f1 ');
}
Function f2 (){
Alert ('F2 ');
}
Function f3 (){
Alert ('f3 ');
}
</Script>
</Head>
<Body>
<Div style = "background-color: red; width: 200px; height: 200px;">
<Div style = "background-color: blue; width: 100px; height: 100px;">
<A onclick = "f1 ();"> Hello </a>
</Div>
</Div>
</Body>
</Html>
After you click "hello", f1 will pop up, and f2 f3 will pop up. Then, when the sub-tag generates an event, it will be passed up like a bubble, call all onclick methods.
However, when you click "hello", you also click the parent label of "hello, that is, the div tag above, and also the parent tag that includes the div tag, that is, another div. So I thought, it wasn't actually the so-called bubble, but you triggered the same event of multiple tags.
So I don't need to use it next. Let's look at the example below.
<Html>
<Head>
<Script>
Function f1 (){
Alert ('f1 ');
}
Function f2 (){
Alert ('F2 ');
}
Function f3 (){
Alert ('f3 ');
}
</Script>
</Head>
<Body>
<Div style = "background-color: red; width: 200px; height: 200px;">
<Div style = "background-color: blue; width: 100px; height: 100px;">
<A onmouseout = "f1 ();"> Hello </a>
</Div>
</Div>
</Body>
</Html>
Yes, the difference from the above Code is to change onclick to onmouseout. How can we test it?
Place your mouse on the "hello" text, move it out, and move it out of the size range of the "hello" div, so that you can trigger it, the <a> onmouseout event of the tag is not triggered. The onmouseout event of the external div is. The test result is,
Unexpectedly, the f1 f2 f3 still pops up. That is to say, no matter whether you trigger an event with the external parent tag or not, you will call the relevant function. That is to say, the name of the bubble mechanism is reasonable. I think too much about it. I also hope that some teachers in the js course can clearly explain what these cainiao may not understand very well, thank you for watching.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
