Awareness event bubbling
In my opinion, event bubbling, he said the simple point is that when we have an element of a triggering event, will trigger all of the same type of parent element and the ancestor of events
We want to know bubbling event has the following features
-
Event bubbling is enabled by default, but we can be controlled by js code event bubbling
当触发我们的事件函数时，事件函数其实会接收到一个event对象，该对象上的stopPropagation()可以阻止事件冒泡。 当我们在我们的事件函数中执行event.stopPropagation()方法，那么事件冒泡到此就结束了 -
Not all types of events are supported event bubbling
-
Event bubbling event will trigger the same type of function
for example
The concept is too vague, followed by practical examples
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>事件冒泡</title>
<style>
.outer1,
.outer2 {
width: 200px;
height: 200px;
margin: 20px;
position: relative;
}
.outer1 {
background: red;
}
.outer2 {
background: yellowgreen;
}
.inner1,
.inner2 {
width: 100px;
height: 100px;
position: absolute;
top: 25%;
left: 25%;
}
.inner1 {
background: blue;
}
.inner2 {
background: pink;
}
</style>
</head>
<body onclick="bodyF()">
<div class="outer1" onclick="outer1F()" onchange="outer1CF()">
<div class="inner1" onclick="inner1F()"></div>
</div>
<div class="outer2" onclick="outer1F()">
<div class="inner2" onclick="inner2F(event)"></div>
</div>
<script>
function bodyF(){
console.log("body is clicked")
}
function outer1CF() {
console.log("outer1 change event has been triggered")
}
function outer1F() {
console.log("outer1 is clicked")
}
function inner1F() {
console.log("inner1 is clicked")
}
function outer2F() {
console.log("outer2 is clicked")
}
function inner2F(event) {
// 阻止事件冒泡
event.stopPropagation();
console.log("inner2 is clicked")
}
</script>
</body>
</html>
Renderings:
ok, now we begin our experiments
First, we click on the blue div implementation of the results, the following browser
Cause Analysis
1. 首先，当我们点击蓝色的div时，会执行蓝色div所绑定的点击事件
2. 然后，开始事件冒泡，朝着蓝色div的父元素及祖先元素冒泡，如果其父元素及祖先元素也绑定相同类型的事件，则执行
在这里，蓝色的div的父元素是红色的div,其祖先元素就只有body元素
首先，执行蓝色div的点击事件函数
然后，再执行其父元素红色div的点击事件函数
最后，执行其祖先元素body的点击事件函数
因此，浏览器的执行效果如上图所示
Next, we click on the pink div implementation of the results, the browser follows
Analysis
1. 首先，我们点击粉色的div时，会触发粉色div的点击事件函数
2. 由于粉色div的点击事件函数中有event.stopPropagation()执行，则会使得事件冒泡到此就结束了
因此，浏览器的执行效果如上图所示
Now, we do the following
- The pink div click event function of event.stopPropagation () method into the green div click event function;
- event.stopPropagation remove the pink div click event function () code statements
- Then we click again on pink div
Implementation of the results of the browser as shown in FIG.
Cause Analysis
1. 首先，点击了粉色的div,则触发粉色div的点击事件函数
2. 因为粉色div的点击事件函数并没有阻止事件冒泡，则事件冒泡到粉色div的父元素，绿色的div
3. 然后触发绿色的div点击事件函数
4. 因为绿色的div点击事件函数有执行event.stopPropagation()，即停止事件冒泡。粉色div的祖先元素body的点击事件就无法触发
因此，点击粉色的div,就执行了粉色div的点击事件和绿色div的点击事件
浏览器的执行效果如上图所示
Click on the red div and green div , eventually triggering their own and their parent click event function and ancestor elements.
Principle analysis with almost above, there is not as elaborate too much
Event delegates
We can implement a mechanism called "event delegate" in accordance with the principle of bubbling event
为什么要提出“事件委托”这种机制
原因
1. 当我们为一个元素注册事件时是需要付出内存的代价的，当我们为元素的事件过多时会影响到页面的性能
2. 代码编写的方便，如果按照我们之前原来的写法，我们需要为每一个元素一个一个注册事件，这样太麻烦了。我们如果使用“事件委托”机制就可以为一系列标签注册事件，减少我们代码的编写
Here, with an example using the "event delegate" of
Sample Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul onclick="handleClick(event)">
<li>this is li one</li>
<li>this is li two</li>
<li>this is li three</li>
</ul>
<script>
function handleClick(event) {
alert(event.srcElement.innerHTML);
}
</script>
</body>
</html>
Now, I want to achieve it by clicking the corresponding li li the corresponding pop-up content
If, according to the original practice, you need to register click event in each li element
Then, if we use the "event delegation" mechanism, as long as their common parent element click event registration, unified handling it. Doing so can reduce a lot of code to write
The event triggered a function can receive information about the current event object triggered by an event tag, label objects we can be triggered event based on this know the true
Here, we registered a click event for the common parent of these three elements ul li, and received a parameter event
event对象上的srcElement的值是指被触发事件的标签（在这里是被点击的li标签）
Then, we click li tag will display the appropriate content, the effect is as follows
Click on a li
Click on the first two li
click on the first three li
End! ! !
