Home > Developer > Web Develop
Before learning the events of jquery, you have to understand the JS event. See below
The concept of eventsHTML interacts with JavaScript through event-driven implementations, such as mouse click events, 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 event flowEvent 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 Phase
In fact, there is another way to bind events in JS: Look at the following code:
<! 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 knowledge points that you need to know:
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
>label;Document.body represents the
<body>label;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: Because 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
Additional knowledge can be learned:
1, the event flow in IE only supports "event bubbling", but the version to ie9+ after the implementation of "DOM2 level event", that is, ie9+ can also be in the capture phase of the corresponding operation of the element.
2. In the DOM event stream, the actual target does not receive events during the capture phase. It is triggered in the "in Target phase" and is considered part of the "bubbling Phase" in event handling. Then, the bubbling phase occurs, and the event propagates back to the document.
Common events for jqueryjquery is a common event, we must memorize the heart
09-js concept of event flow (emphasis)
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
