Deep understanding of event bubbling (Bubble) and event capture (capture) _javascript techniques

The order in which events occur

Suppose another element is nested within one element and both have an OnClick event handler function (event handler). If the user clicks Element 2, the click events for element 1 and element 2 are triggered. But which event was triggered first? Which event handler function will be executed first? In other words, what is the order of events? The following figure is that when you click on the span element area, three clicks will be triggered, but what is the order of events?

<div onclick= "func1" >
   <p onclick= "Func2" >
     <span onclick= "" Func3>
     </span>
   </p>
 </div>

Two kinds of models

There are two distinct ways in which Netscape and Microsoft deal with the sequence of events:

Netscape advocates that events occur from the outermost layer until the most specific elements, the sequence of events that occur is called the capture type

• Microsoft maintains that events occur from the most internal elements, and then propagates up the sequence of events called bubbling

These two sequence of events are diametrically opposed. The Explorer browser only supports bubbling events, both Mozilla,opera7 and Konqueror support. And the older opera and icab don't support either.

W3c

Any event that occurs in the model of the event is first entered into the capture phase until the target element is reached and then into the bubbling phase.

For normal web development, you can choose whether to bind the event handler in the capture or bubbling phase, which is implemented through the AddEventListener () method, and if the usecapture parameter of this function is true, the function is bound at the capture stage, or false, Bind functions in the bubbling phase.

Element.addeventlistener (event, function, Usecapture)

Block bubbling

In the normal course of development, if you want to prevent the spread of events, a method is implemented.

In the Microsoft model, you have to set the Cancelbubble property of the event to True

Window.event.cancelBubble = True

You must invoke the Stoppropagation () method of the event in the Consortium model

E.stoppropagation ()

By calling these methods, all bubbles are prevented from propagating outward. Cross-Browser Solutions:

function DoSomething (e) {
  if (!e) {
    var e = window.event;
    E.cancelbubble = true;
  }
  if (e.stoppropagation) {
    e.stoppropagation ();
  }
}

The above in-depth understanding of event bubbling (Bubble) and event capture (capture) is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.