Web Front-end
JS Tutorial
Detailed introduction to Javascript event bubbling mechanism (graphic tutorial)
Detailed introduction to Javascript event bubbling mechanism (graphic tutorial)
This article mainly introduces relevant information about the detailed introduction of Javascript event bubbling mechanism. Friends who need it can refer to
1. Events
in the browser Client application platforms are basically event-driven, that is, when an event occurs, corresponding actions are taken.
Browser events represent signals that something has happened. The explanation of the event is not the focus of this article. Friends who have not yet understood it can visit the W3school tutorial to learn more. This will help to better understand the following content.
2. Bubble mechanism
What is bubbling?
The following picture should be fulfilled. The bubbles start from the bottom of the water, from deep to shallow, rising to the top. On the way up, the bubbles pass through different depth levels of water.
Correspondingly: This bubble is equivalent to our event here, and the water is equivalent to our entire dom tree; events start from the bottom layer of the dom tree The layer is passed up until it is passed to the root node of the dom.
Simple case analysis
The following is a simple example to illustrate the principle of bubbling:
Define an html, which contains three Simple dom elements: p1, p2, span, p2 contains span, p1 contains p2; and they are all under body:
<body id="body"> <p id="box1" class="box1"> <p id="box2" class="box2"> <span id="span">This is a span.</span> </p> </p> </body>
The interface prototype is as follows:
## On this basis, we implement the following functions: 
<script type="text/javascript">
window.onload = function() {
document.getElementById("body").addEventListener("click",eventHandler);
}
function eventHandler(event) {
console.log("时间："+new Date(event.timeStamp)+" 产生事件的节点：" + event.target.id +" 当前节点："+event.currentTarget.id);
}
</script>Analyze the above results: 
Generally, there will be some information during the event delivery process, which are the components of the event:
The time when the event occurred The location where the event occurred The type of the event The current handler of the event Other information,
##
The complete html code is as follows: 
Insert title here <script type="text/javascript"> window.onload = function() { document.getElementById("body").addEventListener("click",eventHandler); } function eventHandler(event) { console.log("时间："+new Date(event.timeStamp)+" 产生事件的节点：" + event.target.id +" 当前节点："+event.currentTarget.id); } </script> <body id="body"> <p id="box1" class="box1"> <p id="box2" class="box2"> <span id="span">This is a span.</span> </p> </p> </body>
b. Terminate event bubbling
We now want to implement such a function. When p1 is clicked, "Hello, I am the outermost p" will pop up. ", when you click p2, "Hello, I am the second layer p" pops up; when you click span, "Hello, I am span." pops up. From this we will have the following javascript fragment:
<script type="text/javascript">
window.onload = function() {
document.getElementById("box1").addEventListener("click",function(event){
alert("您好，我是最外层p。");
});
document.getElementById("box2").addEventListener("click",function(event){
alert("您好，我是第二层p。");
});
document.getElementById("span").addEventListener("click",function(event){
alert("您好，我是span。");
});
}
</script>It is expected that when the above code clicks span, a pop-up box will appear "Hello, I am span." Yes, It does pop up such a dialog box:
## This can not only produce this dialog box. After clicking OK, the following dialog box will pop up in turn: 
这显然不是我们想要的！ 我们希望的是点谁显示谁的信息而已。为什么会出现上述的情况呢？ 原因就在于事件的冒泡，点击span的时候，span 会把产生的事件往上冒泡，作为父节点的p2 和 祖父节点的p1也会收到此事件，于是会做出事件响应，执行响应函数。现在问题是发现了，但是怎么解决呢？
方法一：我们来考虑一个形象一点的情况：水中的一个气泡正在从底部往上冒，而你现在在水中，不想让这个气泡往上冒，怎么办呢？——把它扎破！没了气泡，自然不会往上冒了。类似地，对某一个节点而言，如果不想它现在处理的事件继续往上冒泡的话，我们可以终止冒泡：
在相应的处理函数内，加入 event.stopPropagation() ,终止事件的广播分发，这样事件停留在本节点，不会再往外传播了。修改上述的script片段：
<script type="text/javascript">
window.onload = function() {
document.getElementById("box1").addEventListener("click",function(event){
alert("您好，我是最外层p。");
event.stopPropagation();
});
document.getElementById("box2").addEventListener("click",function(event){
alert("您好，我是第二层p。");
event.stopPropagation();
});
document.getElementById("span").addEventListener("click",function(event){
alert("您好，我是span。");
event.stopPropagation();
});
}
</script>经过这样一段代码，点击不同元素会有不同的提示，不会出现弹出多个框的情况了。
方法二：事件包含最初触发事件的节点引用 和 当前处理事件节点的引用，那如果节点只处理自己触发的事件即可,不是自己产生的事件不处理。event.target 引用了产生此event对象的dom 节点，而event.currrentTarget 则引用了当前处理节点，我们可以通过这 两个target 是否相等。
比如span 点击事件，产生一个event 事件对象，event.target 指向了span元素，span处理此事件时，event.currentTarget 指向的也是span元素，这时判断两者相等，则执行相应的处理函数。而事件传递给 p2 的时候，event.currentTarget变成 p2，这时候判断二者不相等，即事件不是p2 本身产生的，就不作响应处理逻辑。
<script type="text/javascript">
window.onload = function() {
document.getElementById("box1").addEventListener("click",function(event){
if(event.target == event.currentTarget)
{
alert("您好，我是最外层p。");
}
});
document.getElementById("box2").addEventListener("click",function(event){
if(event.target == event.currentTarget)
{
alert("您好，我是第二层p。");
}
});
document.getElementById("span").addEventListener("click",function(event){
if(event.target == event.currentTarget)
{
alert("您好，我是span。");
}
});
}
</script>比较：
从事件传递上看：方法一在于取消事件冒泡，即当某些节点取消冒泡后，事件不会再传递；方法二在于不阻止冒泡，过滤需要处理的事件，事件处理后还会继续传递；
优缺点：
方法一缺点：为了实现点击特定的元素显示对应的信息，方法一要求每个元素的子元素也必须终止事件的冒泡传递，即跟别的元素功能上强关联，这样的方法会很脆弱。比如，如果span 元素的处理函数没有执行冒泡终止，则事件会传到p2 上，这样会造成p2 的提示信息；
方法二缺点：方法二为每一个元素都增加了事件监听处理函数，事件的处理逻辑都很相似，即都有判断 if(event.target == event.currentTarget)，这样存在了很大的代码冗余，现在是三个元素还好，当有10几个，上百个又该怎么办呢？
还有就是为每一个元素都有处理函数，在一定程度上增加逻辑和代码的复杂度。
我们再来分析一下方法二：方法二的原理是 元素收到事件后，判断事件是否符合要求，然后做相应的处理，然后事件继续冒泡往上传递； 既然事件是冒泡传递的，那可不可以让某个父节点统一处理事件，通过判断事件的发生地（即事件产生的节点），然后做出相应的处理呢？答案是可以的，下面通过给body 元素添加事件监听，然后通过判断event.target 然后对不同的target产生不同的行为。
将方法二的代码重构一下：
<script type="text/javascript">
window.onload = function() {
document.getElementById("body").addEventListener("click",eventPerformed);
}
function eventPerformed(event) {
var target = event.target;
switch (target.id) {
case "span":
alert("您好，我是span。");
break;
case "p1":
alert("您好，我是第二层p。");
break;
case "p2":
alert("您好，我是最外层p。");
break;
}
}
</script>结果会是点击不同的元素，只弹出相符合的提示，不会有多余的提示。
Through the above method, we have handed over the processing functions that each element should have to its grandparent node body element to complete. In other words, span, p2, and p1 will have their own response logic. Delegate it to the body and let it complete the corresponding logic without implementing the corresponding logic yourself. This mode is the so-called event delegation.
The following is a schematic diagram:
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Detailed explanation of JavaScript cookie and simple example application (picture and text tutorial)
Native and powerful DOM selection Detailed introduction to querySelector (code attached)
javascript Several methods of commenting code (graphic tutorial)
The above is the detailed content of Detailed introduction to Javascript event bubbling mechanism (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS
Dec 17, 2023 pm 06:55 PM
Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
How to implement an online reservation system using WebSocket and JavaScript
Dec 17, 2023 am 09:39 AM
How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.
PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts
Dec 18, 2023 pm 03:39 PM
With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese
How to use JavaScript and WebSocket to implement a real-time online ordering system
Dec 17, 2023 pm 12:09 PM
Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
