When doing DOM operations in JavaScript, you will definitely encounter js bubbling events. The most common one is the div pop-up event as shown in the illustration
When you click on the gray part, the pop-up window disappears, but when you click on the black part, it has no effect.
Use the following code to analyze js bubbling events
<script><br>
var box=document.querySelector(".box"),<br>
btn=document.querySelector(".btn");<br>
box.onclick=function(event){<br>
alert("I am div");<br>
}<br>
btn.onclick=function(event){<br>
alert("I am button");<br>
}<br>
</script>
Using the 3D view of the default developer tools of Firefox browser, you can clearly see the order of div layers
Illustration:
When the button is clicked, "I am button" will pop up and then "I am div" will pop up, because the button event is triggered first and then the next layer div click event is triggered,
The triggering of events is based on the first-in, first-out principle.
Illustration:
Then sometimes we don’t want multiple events to trigger and cause conflicts, so events have stopPropagation(); methods to prevent bubbling
There is also an event method that is also commonly used, such as a link. If I don’t want to jump when clicking the link, I use the event.preventDefault(); method
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
