I first learned that bubbling is when onmouseout and onmouseleave.
One supports bubbling and the other does not support bubbling.
1. Let's first look at the difference between these two events.
2. What is going on when talking about "bubbling" ?
3. Bubbling apps
4. Disabling bubbling
Bubbling is about the relationship between parent and child, then we will directly create a parent div and a child div.
Then do the onmouseout and onmouseleave events to the parent respectively.
We move the mouse from the outside through the parent to the child, and from the child through the parent.
You can see the difference between the two.
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#ms_01{
width: 400px;
height: 400px;
background-color: #d3f017;
display: flex;
justify-content: center;
align-items: center;
}
#ms_02{
width: 220px;
height: 220px;
background-color: brown;
}
</style>
</head>
<body>
<div id="ms_01">
<div id="ms_02">
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var ms_01=document.getElementById("ms_01");
ms_01.onmouseleave=function(){
f_01();
}
function f_01(){
ms_02.style.backgroundColor="black";
}
}
</script>
</body>
Okay, everyone now knows a little bubbling incident.
Next we talk about "" bubbling "", (have you bubbling today?)
We can understand it with the help of bubbling in reality. Bubbling means spreading upward from the child level to the parent level, which is called bubbling.
This understanding is relatively dry, we use the code to help understand.
Let's nest five divs. (From outside to inside: 1-2-3-4-5)
The result we get is to spread from the child level up.
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#ms_01{
width: 600px;
height: 400px;
background-color: #d3f017;
display: flex;
justify-content: center;
align-items: center;
}
#ms_02{
width: 100%;
height: 260px;
background-color: brown;
display: flex;
justify-content: center;
align-items: center;
}
#ms_03{
width: 100%;
height: 200px;
background-color: #28edf7;
display: flex;
justify-content: center;
align-items: center;
}
#ms_04{
width: 100%;
height: 160px;
background-color: #f7863a;
display: flex;
justify-content: center;
align-items: center;
}
#ms_05{
width: 100%;
height: 100px;
background-color: #f71010;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="ms_01">
<div id="ms_02">
<div id="ms_03">
<div id="ms_04">
<div id="ms_05">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var ms_01=document.getElementById("ms_01");
ms_01.onclick=function(){
f_01();
}
ms_02.onclick=function(){
f_02();
}
ms_03.onclick=function(){
f_03();
}
ms_04.onclick=function(){
f_04();
}
ms_05.onclick=function(){
f_05();
}
function f_01(){
alert("我是第1个div");
}
function f_02(){
alert("我是第2个div");
}
function f_03(){
alert("我是第3个div");
}
function f_04(){
alert("我是第4个div");
}
function f_05(){
alert("我是第5个div");
}
}
</script>
</body>
Everyone should have seen some clues by now.
Next, let’s talk about his application.
If we want to collect the child's function information, can it be collected in the parent application, and this is also the default bubbling.
Next, let's talk about how to avoid bubbling.
event.stopPropagation();
No more events will be distributed.
The termination event is further propagated during the capture, target processing, or bubbling phase of the propagation process. After calling this method, the handler on the node that handles the event will be called, and the event will no longer be dispatched to other nodes.
Propagation means (multiply; multiply; spread; propaganda; heredity; spread),
From the literal meaning, it is not difficult for us to understand, it is to prevent the transmission and spread of the incident, right?
We can understand that adding e.stopPropagation() can make it independent of the bubbling flow of the original parent.
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#ms_01{
width: 600px;
height: 400px;
background-color: #d3f017;
display: flex;
justify-content: center;
align-items: center;
}
#ms_02{
width: 100%;
height: 260px;
background-color: brown;
display: flex;
justify-content: center;
align-items: center;
}
#ms_03{
width: 100%;
height: 200px;
background-color: #28edf7;
display: flex;
justify-content: center;
align-items: center;
}
#ms_04{
width: 100%;
height: 160px;
background-color: #f7863a;
display: flex;
justify-content: center;
align-items: center;
}
#ms_05{
width: 100%;
height: 100px;
background-color: #f71010;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="ms_01">
<div id="ms_02">
<div id="ms_03">
<div id="ms_04">
<div id="ms_05">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var ms_01=document.getElementById("ms_01");
ms_01.onclick=function(){
f_01();
}
ms_02.onclick=function(){
f_02();
}
ms_03.onclick=function(){
f_03();
}
ms_04.onclick=function(){
f_04();
}
ms_05.onclick=function(){
event.stopPropagation();
f_05();
}
function f_01(){
alert("我是第1个div");
}
function f_02(){
alert("我是第2个div");
}
function f_03(){
alert("我是第3个div");
}
function f_04(){
alert("我是第4个div");
}
function f_05(){
alert("我是第5个div");
}
}
</script>
</body>
By now everyone should have a basic understanding!
Leave a question for everyone,
[Suppose we leave 3 out and click 5, what will happen? 】
Answer: 5——4——3, stop
[Suppose we get out of 3 and 5 and click on 5 or 4. What will happen? 】
Answer: out of 5, stop
Answer: 4-3, stop
Do we find that it will also break away from its own subset.
