Details about javascript event bubbling and javascript bubbling

Source: Internet
Author: User

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:

  • 1. function stopBubble (e) {}. This function is used to prevent event bubbles. The parameter is an event object.
  • 2. if (e & e. stopPropagation) {e. stopPropagation () ;}, determine whether stopPropagation is supported. if yes, use e. stopPropagation (). The stopPropagation () functions IE10 and IE10 are not supported by browsers.
  • 3. window. event. cancelBubble = true. This can be used by IE to prevent event bubbling.

The above is a detailed introduction to javascript event bubbling, hoping to help you learn it.

Articles you may be interested in:
  • Prevents JavaScript event bubbling transfer (cancelBubble, stopPropagation)
  • Introduction and Application of JavaScript event bubbling
  • Summary of experiences on onmouseout and event bubbling in js
  • Js event bubbling instance sharing (tested)
  • How does js cancel event bubbling?
  • Event bubbling and event capture in js
  • Example of js blocking bubbling and jquery blocking event bubbling
  • Js blocks default events and js blocks events. Bubble example shares js blocks bubble events.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.