Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what is the concept of JavaScript event flow". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "what is the concept of JavaScript event flow" can help you solve the problem.

In js, the event flow is the sequence in which events are triggered between the target element and the ancestor element. According to the order of event propagation, event flow can be divided into two types: 1, bubble event flow, event propagation is from the most specific event target to the least specific event target; 2, capture event flow, event propagation is from the most unspecific event target to the most specific event target.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

What is an event?

An event is a specific moment of interaction that occurs in a document or browser window.

An event is an action performed by the user or the browser itself, such as click,load and mouseover are the names of the event.

Events are the bridge between javaScript and DOM.

If you trigger, I will execute-- the event occurs, and call its handler to execute the corresponding JavaScript code to give a response.

Typical examples are: the load event is triggered after the page is loaded, and the click event is triggered when the user clicks the element.

What is the event flow?

When an element on a page triggers a specific event, such as a click, all ancestral elements, except the clicked target element, trigger the event all the way to window.

So the question arises: should the event be triggered first on the target element or on the ancestor element first? This is the concept of event flow.

An event flow is the sequence in which events are triggered between the target element and the ancestor element.

In the early days, IE and Netscape put forward the opposite concept of event flow. IE event flow is event bubbling, while Netscape event flow is event capture.

Two event flow models

The sequence of event propagation corresponds to two event flow models of browsers: capture event flow and bubble event flow.

Bubble event flow: the propagation of events is from the most specific event target to the least specific event target. From the leaves to the roots of the DOM tree. [recommended]

Capture event flow: the propagation of events is from the least specific event target to the most specific event target. From the root to the leaf of the DOM tree.

The idea of event capture is that the less specific node should receive the event earlier, while the most specific node should finally receive the event.

Click me!

In the above html code, you click the

element,

The propagation order of click events in bubbling event flow is

-"document

In the capture event flow, the propagation order of click events is document- "

Note:

1) all modern browsers support event bubbling, but there are some differences in implementation:

In IE5.5 and earlier versions, event bubbling skips elements (directly from body to document).

IE9, Firefox, Chrome, and Safari bubble the event all the way to the window object.

2), IE9, Firefox, Chrome, Opera, and Safari all support event capture. Although the DOM standard requires that events should be propagated from the document object, these browsers start capturing events from the window object.

3) because older browsers do not support it, few people use event capture. Event bubbling is recommended.

2), DOM event flow

The DOM standard adopts capture + bubbling. Both event flows trigger all objects in DOM, starting with the document object and ending at the document object.

The DOM standard stipulates that the event flow consists of three stages: the event capture phase, the target phase and the event bubbling phase.

Event capture phase: the actual target (

Events are not received during the capture phase That is, during the capture phase, the event stops from the document to the next. In the picture above, it is 1: 3.

In the target phase: the event is in the

Take place and deal with it. But event handling is seen as part of the bubbling phase.

Bubbling phase: the event propagates back to the document.

Note:

1) although the DOM2 level events standard specification makes it clear that the event target is not involved in the event capture phase, events on the event object are triggered during the capture phase in IE9, Safari, Chrome, Firefox, Opera9.5 and later versions. As a result, there are two opportunities to manipulate events on the target object.

2) not all events will go through the bubbling stage. All events go through the capture phase and the target phase, but some events skip the bubbling phase: for example, focus events that gain input focus and blur events that lose input focus.

Two opportunities to manipulate event examples on the target object:

# outer {position: absolute; width: 400px; height: 400px; top:0; left: 0; bottom:0; right: 0; margin: auto; background-color: deeppink;} # middle {position: absolute; width: 300px; height:300px; top:50%; left: 50% Margin-left:-150px; margin-top:-150px; background-color: deepskyblue;} # inner {position: absolute; width: 100px; height:100px; top:50%; left:50%; margin-left:-50px; margin-top:-50px; background-color: darkgreen; text-align: center Line-height: 100px; color:white;} # outer,#middle,#inner {border-radius:100%;} click me! Var innerCircle= document.getElementById ("inner"); innerCircle.addEventListener ("click", function () {alert ("click event of innerCircle is triggered during capture");}, true); innerCircle.addEventListener ("click", function () {alert ("click event of innerCircle is triggered during bubbling phase");}, false); var middleCircle= document.getElementById ("middle") MiddleCircle.addEventListener ("click", function () {alert ("click event of middleCircle is triggered during capture phase"); middleCircle.addEventListener ("click", function () {alert ("click event of middleCircle is triggered during bubble phase");}, false); var outerCircle= document.getElementById ("outer") OuterCircle.addEventListener ("click", function () {alert ("click event of outerCircle is triggered during capture";}, true); outerCircle.addEventListener ("click", function () {alert ("click event of outerCircle is triggered during bubble phase";}, false); the effect is that six boxes pop up one after another, and I have integrated it into a diagram to illustrate the principle:

So much for the introduction of "what is the concept of JavaScript event flow". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.