Home > Developer > JavaScript
Details about javascript event bubbling and javascript bubbling
Events are one of the core content in javascript. An important concept is inevitable in the application of events, that is, event bubbling. Before introducing event bubbling, first, we will introduce another important concept event stream:
1. What is event stream:
The Document Object Model (DOM) is a tree structure that can be represented in images.
If an html element triggers an event, the event will be transmitted between the trigger node and the root node in the DOM tree in a certain order, and all the nodes that pass through will receive the triggered event, this propagation process is called an event stream. Events can be divided into two categories according to the propagation order. One is event bubbling and the other is event capture. Here we will discuss the topics to be discussed in this chapter:
1. Event bubbling:
The so-called time bubble is when an element triggers an event, the event will be like a bubble, from the trigger element to all its parent nodes, until the root node will receive this event, if the corresponding event handler function is registered in the parent element, even if the event is triggered on the child node, the event handler function registered on the parent element will also be triggered. For example, in the figure above, if the onclick event of Element a is triggered, its parent elements p, document, and widow will receive the event, if the corresponding parent element registers a time-consuming processing function, the event processing function will be executed. Check a code example:
<Html>The purpose of the above Code is to pop up the content in the corresponding cell when you click the corresponding cell. However, in the above implementation, The onclick event handler is not registered for each cell, but the onclick event handler is registered on the parent element table of the cell, when a cell is clicked, The onclick event is triggered and the event is propagated from the event object. The table element has a registered onclick event handler function, this processing function will be executed at this time. Of course, the parameter passing of the event object will be set here. All browsers support event bubbling. Ii. Event Capture:
Event capturing is the opposite of event bubbling. When an element is clicked, the event propagation direction is from the root element to the trigger element. This is not supported by IE, therefore, the bubble event processing model is generally used by default.
2. javascript prevents event bubbling code
Event bubbling is very useful in some scenarios, but sometimes it must be blocked. Below is an instance code that is compatible with all mainstream browsers to prevent event bubbling.
Code example:function stopBubble(e) { if(e&&e.stopPropagation) { e.stopPropagation(); } else { window.event.cancelBubble=true; } }The above code can prevent event bubbles. Next, let's make a simple comment on the Code:
Ii. Code comments:
The above is a detailed introduction to javascript event bubbling, hoping to help you learn it.
Articles you may be interested in:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
