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

This article mainly explains "how to realize the event flow of javascript". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to realize the event flow of javascript".

Javascript event flow includes: 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; 3, DOM event flow.

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

First, the event occurs in the document or browser window, a specific moment of interaction.

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.

II. Event flow

The event flow describes the order in which events are received from the page.

1. Perceptual knowledge of events.

Question: what kind of element can sense such an event when you click on a page element?

Answer: when you click the element, you also click the container element of the element, or even the entire page.

Example: there are three concentric circles, add a corresponding event handler to each circle, and pop up the corresponding text. Click the innermost circle, and also click the outer circle, so the click event of the outer circle will also be triggered.

# 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.onclick= function () {alert ("innerCircle");}; var middleCircle= document.getElementById ("middle"); middleCircle.onclick=function () {alert ("middleCircle");} var outerCircle= document.getElementById ("outer"); outerCircle.onclick= function () {alert ("outerCircle") } the effect is as follows:

2. Event flow

When an event occurs, it propagates in a specific order between the element node and the root node, and all nodes passing through the path receive the event, which is the DOM event flow.

1) two kinds of 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:

3. Typical application of event broker for event flow

In traditional event handling, you need to add an event handler for each element. The js event broker is a simple and effective technique that allows you to add event handlers to a parent element, thus avoiding adding event handlers to multiple child elements.

1), event agent

The principle of the event broker uses event bubbling and target elements, adding an event handler to the parent element, waiting for the child element event to bubble, and the parent element can determine which child element it is by target (IE is srcElement), so as to deal with it accordingly. For more information about target, please refer to the javaScript event (4) the following example of the public members (properties and methods) of event.

Traditional event handling, adding an event handler for each element, the code is as follows:

Redorangeyellowgreenblueindigopurple (function () {var colorList=document.getElementById ("color-list"); var colors=colorList.getElementsByTagName ("li"); for (var itemoswiti)

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.