Home > Developer > JavaScript
Event Concept:
HTML interacts with JavaScript through event-driven implementations, such as mouse click event onclick, page scrolling event onscroll, and so on, to subscribe to events by adding event listeners to documents or elements in the document. To know when these events are being invoked, it is necessary to understand the concept of "event flow".
What is an event flow?
The event flow describes the order in which events are received from the page.
1. Dom Event Flow
The event flow defined by the "DOM2 level event" consists of three phases:
① event capture phase;
② in the target stage;
③ event bubbling stage;
Case Description: There is a button on the page with ID btn, what happens when I click this button?
<! DOCTYPE html>When we click on this btn, we look at what the page is outputting:
Before explaining why the output is so, there are a few more points to explain:
1, AddEventListener
AddEventListener is a new operation of the specified event handler for the DOM2 event, which receives 3 parameters: the name of the event to be processed, the function that is the event handler, and a Boolean value. The last Boolean parameter, if True, indicates that the event handler is called during the capture phase and, if false, that the event handler is called during the bubbling phase.
2. The relationship between document, DocumentElement and Document.body:
Document represents the entire HTML page;
Document.documentelement represents the
Document.body represents the <body> tag;
And then we'll talk about the results of the output in the example above:
In the standard "DOM2 level Event", the event flow is first through the event capture phase, then in the target phase, and finally in the event bubbling phase. Here you can draw a diagram to indicate:
First, during the event capture process, the document object receives the Click event First, and then the event goes down in the DOM tree and propagates to the actual target of the event, the a tag with ID btn.
Then, during event bubbling, the event is initially received by the most specific element (a tag) and then propagated up to the less specific node (document).
Points to note: Since older browsers do not support event capture, event bubbling is required in real-world development, and event capture is used when special needs are required.
Learn about events in JavaScript--event streams
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
