7. The event bubbling mechanism
7.1. What is the event bubble
When an element receives an event, the event will be propagated to its parent element, its negative level elements will spread up layer by layer, until the topmost window, this event propagation mechanism called event bubbling.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取元素
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
//给元素加事件处理函数
oDiv1.onclick = fn1;
oDiv2.onclick = fn1;
oDiv3.onclick = fn1;
//弹出对应id属性值
function fn1(){
alert(this.id);
}
}
</script>
<style type="text/css">
#div1{
width: 600px;
height: 400px;
background: black;
border: 1px solid black;
}
#div2{
width: 400px;
height: 300px;
margin: 50px auto;
background: blue;
border: 1px solid blue;
}
#div3{
width: 200px;
height: 200px;
margin: 50px auto;
background: red;
}
</style>
</head>
<body>
<div id="div1">
div1
<div id="div2">
div2
<div id="div3">
div3
</div>
</div>
</div>
</body>
</html>Code analysis: When you click div3 when the first trigger div3 click events, pop div3 of id value div3, then click on the event passed to the parent element div2, div2 trigger the click event, div2 bound event handlers fn1, Therefore, it will pop up div2 div2 id attribute value, and then click event div2 then spread to div1, div1 also bind the event handler, pop id value div1, div1 upward propagation click event, since no parent div1 binding event handlers, so there is no pop-up value, but div1 parent or received a click event, but does not respond, this is the whole process of bubbling mechanism. JavaScript bubbling mechanism is present by default
7.2. The impact of bubbling mechanism
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById('box');
oBtn.onclick = function(){
oDiv.style.display = "block";
}
document.onclick = function(){
oDiv.style.display = "none";
}
}
</script>
<style type="text/css">
#box{
width: 300px;
height: 300px;
background: blue;
display: none;
}
</style>
</head>
<body>
<input type="button" id="btn" value="显示" />
<div id="box"></div>
</body>
</html>
//注意：上面代码点击按钮不显示的原因就是当按钮的点击事件触发以后把div显示出来了，但是随后又把点击
事件传到外层，document接收到点击事件以后，调用事件处理函数又把div隐藏了。因此，看不到div显示的效
果，也就是div的点击事件和父级的点击事件冲突了，这也是事件冒泡带来的问题。7.3. Stop bubbling
If the above code to work properly, it must cancel the event bubbling click the div element. We need to cancel the event bubbling cancelBubble property on the event object is set to true, as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById('box');
oBtn.onclick = function(ev){
var ev = ev || event;
//取消事件冒泡
ev.cancelBubble = true;
oDiv.style.display = "block";
}
document.onclick = function(){
oDiv.style.display = "none";
}
}
</script>
<style type="text/css">
#box{
width: 300px;
height: 300px;
background: blue;
display: none;
}
</style>
</head>
<body>
<input type="button" id="btn" value="显示" />
<div id="box"></div>
</body>
</html>7.4. Bubbling mechanism to bring the benefits?
Although the event bubbling brought some bad effects, but can be solved by canceling event bubbling, the reason for the default event bubbling mechanism turned on, because the event bubbling will save a lot of code. For example: there is a demand, click a button to display the div, click the button in addition to other elements need to be hidden div, this time there are two solutions. First, find the page in the other elements in addition to the button click event gave these elements are added, and then hide the div. If you have this kind of hundreds of elements on the page, it is quite complicated to implement, therefore, can not be used. The second solution, to co-parent click event add these elements, these elements later when the click event is triggered, the event spread to the click event of the parent element, thus saving a lot of code, which is applied to achieve the above case .
Screw classroom video lessons Address: http://edu.nodeing.com