Detailed explanation of event bubbling and event capturing examples
JS event flow schematic diagram:
It can be seen that a complete JS event flow starts from window and ends with A process of returning to the window; the event flow is divided into three stages: capture process (1~5), target process (5~6), bubbling process (6~10);
In fact, the capturing process and the bubbling process are completely opposite processes, that is, the process of events propagating from parent elements to child elements and child elements to parent elements.
Event capture
Event capture can only be achieved in the second form of event binding, The second form of event binding In the above example, click When div3 is used, div1 will receive two click events. One is the click event of div1 that is triggered in the capture phase, and the other is the click event of div1 that is triggered in the bubbling phase; the third parameter in addEventListener: true---- Capture, false-----bubble; if the above is set to true, the click event in the capture phase is triggered
Another example:
nbsp;html><meta><title>事件捕获</title><style>div{padding:40px;}#div1{background: red;}#div2{background:green;}#div3{background: blue;}</style><script>window.onload=function(){var oDiv1=document.getElementById('div1');var oDiv2=document.getElementById('div2');var oDiv3=document.getElementById('div3');function fn1(){
alert(this.id);
}//点击div3部分时，分别弹出div1，div2，div3 oDiv1.addEventListener('click',fn1,true);//为true时，是事件捕获 false=冒泡 oDiv2.addEventListener('click',fn1,true);
oDiv3.addEventListener('click',fn1,true);
}</script><div><div><div></div></div></div>
Click div3 to see the pop-up results: 3, 2, 1
When you click div3, div1 will receive two click events. In the capture phase (true), trigger The click event of div1 is triggered, and the pop-up result is: 3; in the bubbling stage, the click event of div3 is triggered, and the pop-up result is: 2, and then the click event of div1 is triggered, and the pop-up result is: 1
Event bubbling
Example:
nbsp;html><meta><title>事件捕获</title><style>div{padding:40px;}#div1{background: red;}#div2{background:green;}#div3{background: blue;}</style><script>window.onload=function(){var oDiv1=document.getElementById('div1');var oDiv2=document.getElementById('div2');var oDiv3=document.getElementById('div3');
oDiv1.addEventListener('click',function(){
alert(1);
},false);
oDiv1.addEventListener('click',function(){
alert(3);
},true);
oDiv3.addEventListener('click',function(){
alert(2);
},false);//点击div3，分别弹出3,2,1 }</script><div><div><div></div></div></div>
##Prevent bubbling: Call event.cancelBubble=true in the current event function to prevent bubbling;
nbsp;html><meta><title>事件冒泡</title><style>div{padding:40px;} #div1{ background: red; } #div2{ background:green; }#div3{background: blue;}</style><script>window.onload=function(){var oDiv1=document.getElementById('div1');var oDiv2=document.getElementById('div2');var oDiv3=document.getElementById('div3');function fn1(){
alert(this.id);
}//事件函数绑定 oDiv1.onclick=fn1;//告诉div1，如果它接收到了一个点击事件，那它就去执行fn1 oDiv2.onclick=fn1;
oDiv3.onclick=fn1;//div3,div1 事件冒泡 }</script><div><div><div></div></div></div>
##The use of event bubbling
The following is a common function in a website-share to
nbsp;html><meta><title>阻止冒泡</title><style>#div1{width:100px;height:200px;border:1px solid red;display: none;}</style><script>window.onload=function(){var oBtn=document.getElementById('btn1');var oDiv=document.getElementById('div1');
oBtn.onclick=function(ev){var oEvent=ev||event;//阻止当前事件函数事件冒泡 oEvent.cancelBubble=true;
oDiv.style.display='block';
}
document.onclick=function(){ /* setTimeout(function(){//观察事件冒泡：div出现一秒钟后隐藏了
oDiv.style.display='none';
},1000);*/oDiv.style.display='none';
}
}</script><input><div>点击按钮div就出现，点击除按钮以外的部分div就消失</div>
The above is the detailed content of Detailed explanation of event bubbling and event capturing examples. 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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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
![Event ID 4660: Object deleted [Fix]](https://img.php.cn/upload/article/000/887/227/168834320512143.png?x-oss-process=image/resize,m_fill,h_207,w_330)
Event ID 4660: Object deleted [Fix]
Jul 03, 2023 am 08:13 AM
Some of our readers encountered event ID4660. They're often not sure what to do, so we explain it in this guide. Event ID 4660 is usually logged when an object is deleted, so we will also explore some practical ways to fix it on your computer. What is event ID4660? Event ID 4660 is related to objects in Active Directory and will be triggered by any of the following factors: Object Deletion – A security event with Event ID 4660 is logged whenever an object is deleted from Active Directory. Manual changes – Event ID 4660 may be generated when a user or administrator manually changes the permissions of an object. This can happen when changing permission settings, modifying access levels, or adding or removing people or groups
Get upcoming calendar events on your iPhone lock screen
Dec 01, 2023 pm 02:21 PM
On iPhones running iOS 16 or later, you can display upcoming calendar events directly on the lock screen. Read on to find out how it's done. Thanks to watch face complications, many Apple Watch users are used to being able to glance at their wrist to see the next upcoming calendar event. With the advent of iOS16 and lock screen widgets, you can view the same calendar event information directly on your iPhone without even unlocking the device. The Calendar Lock Screen widget comes in two flavors, allowing you to track the time of the next upcoming event, or use a larger widget that displays event names and their times. To start adding widgets, unlock your iPhone using Face ID or Touch ID, press and hold
In JavaScript, what is the purpose of the 'oninput' event?
Aug 26, 2023 pm 03:17 PM
When a value is added to the input box, the oninput event occurs. You can try running the following code to understand how to implement oninput events in JavaScript - Example<!DOCTYPEhtml><html> <body> <p>Writebelow:</p> <inputtype="text"
How to implement change event binding of select elements in jQuery
Feb 23, 2024 pm 01:12 PM
jQuery is a popular JavaScript library that can be used to simplify DOM manipulation, event handling, animation effects, etc. In web development, we often encounter situations where we need to change event binding on select elements. This article will introduce how to use jQuery to bind select element change events, and provide specific code examples. First, we need to create a dropdown menu with options using labels:
What are the commonly used events in jquery
Jan 03, 2023 pm 06:13 PM
Commonly used events in jquery are: 1. Window events; 2. Mouse events, which are events generated when the user moves or clicks the mouse on the document, including mouse clicks, move-in events, move-out events, etc.; 3. Keyboard events, Events are generated every time the user presses or releases a key on the keyboard, including key press events, key release events, etc.; 4. Form events, such as the focus() event will be triggered when an element gains focus, and the focus() event will be triggered when it loses focus. The blur() event is triggered, and the submit() event is triggered when the form is submitted.
How to implement calendar functions and event reminders in PHP projects?
Nov 02, 2023 pm 12:48 PM
How to implement calendar functions and event reminders in PHP projects? Calendar functionality and event reminders are one of the common requirements when developing web applications. Whether it is personal schedule management, team collaboration, or online event scheduling, the calendar function can provide convenient time management and transaction arrangement. Implementing calendar functions and event reminders in PHP projects can be completed through the following steps. Database design First, you need to design a database table to store information about calendar events. A simple design could contain the following fields: id: unique to the event
A Deep Dive into Close Button Events in jQuery
Feb 24, 2024 pm 05:09 PM
In-depth understanding of the close button event in jQuery During the front-end development process, we often encounter situations where we need to implement the close button function, such as closing pop-up windows, closing prompt boxes, etc. When using jQuery, a popular JavaScript library, it becomes extremely simple and convenient to implement the close button event. This article will delve into how to use jQuery to implement close button events, and provide specific code examples to help readers better understand and master this technology. First, we need to understand how to define
How to build event-based applications using PHP
May 04, 2024 pm 02:24 PM
Methods for building event-based applications in PHP include using the EventSourceAPI to create an event source and using the EventSource object to listen for events on the client side. Send events using Server Sent Events (SSE) and listen for events on the client side using an XMLHttpRequest object. A practical example is to use EventSource to update inventory counts in real time in an e-commerce website. This is achieved on the server side by randomly changing the inventory and sending updates, and the client listens for inventory updates through EventSource and displays them in real time.
