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

This article mainly introduces the example analysis of JavaScript event stream, which is very detailed and has certain reference value. Friends who are interested must finish it!

1. What is the event flow?

Before we learn about the event flow, let's take a look at what is an event?

An event represents a meaningful moment in a document or browser window

That is, the interaction between the user and the page

(for example, when the user clicks on an element, the mouse moves over an element, etc.)

The role of events

The interaction between JavaScript and HTML is realized through events.

So what is the event flow?

The order in which the page accepts events

two。 Event flow Model 2.1) event bubbling

Events are defined to trigger from the most specific element (the leaf of the DOM tree) and then propagate upward to the less specific element (the root node of the DOM tree)

Understand through an example:

Event bubble click

When the element is clicked, the click event is triggered

Then the click event goes all the way up the DOM tree and is triggered in turn at the passing node until document

That is,-> document

You can understand it through the following figure:

2.2) event capture

The event is received first from the least specific node (the root node of the DOM tree), while the most specific node (the leaf of the DOM tree) should receive the event last

Understand it through an example:

Event capture click

After clicking, the click event is first captured by document

Then propagate all the way down the DOM tree until the target element is reached

That is, document->

Use the following figure to understand:

According to its characteristics, it has the following functions:

Intercept an event before it reaches its final target

Tips:

Since some older browsers do not support event capture, event bubbling is generally recommended.

3.   DOM event flow

DOM2 Events stipulates that the event flow is divided into three phases:

Event capture, goal attainment, and event bubbling.

Event capture occurs first, making it possible to intercept the event in advance, then the actual target element receives the event, and finally the event bubbles (respond to the event at this stage at the latest)

Understand through an example:

DOM event stream click

After clicking on the element, the event is triggered in the order shown in the following figure

In the DOM event flow, the actual target element does not receive an event during the capture phase (the capture phase ends from document to).

Capture phase: document->-> that is, 1,2,3 in the figure

Achieve the goal: that is, the event is triggered on the, that is, 4 in the figure (usually considered part of the bubbling phase when the event is handled)

Bubble stage:->-> document: 5, 6, 7 in the figure

Tips:

Although the DOM2 Events specification makes it clear that the capture phase does not hit the target event, modern browsers trigger events on the event target during the capture phase. Therefore, there are two opportunities to deal with the event on the event target.

The above is all the content of the article "sample Analysis of JavaScript event flow". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.