JQuery source code analysis-10 Event processing-Event-Overview and basic knowledge

 

Author: nuysoft/high cloud QQ: 47214707 EMail: nuysoft@gmail.com

 

 

Read, write, or something wrong. Please tell me more about common progress.

 

 

 

Note:

 

 

 

I would like to thank this friend for his feedback on the lack of examples. In the process of reading the source code, you must write many examples to track the code calling process. You often need to perform single-step debugging to find the difficulty. For example, you need to repeat animations and AJAX, cover all branches as much as possible. It will take a long time to record the process in text, and it may not be clear, because it is not as effective as the DEMO, and the best way is to record it as a video, this is a little far away from time and learning.

 

 

 

For example of getting started, some friends suggest doing more tutorials. My suggestion is to go to the official website, and the official website has a very full DEMO and a detailed explanation. Other tutorials are also copied from the official website, many comments on the official website are very valuable and worth a closer look.

 

 

 

Some people will try to use native js to implement a similar function in the process of analysis. This is a good habit; this series aims to deeply analyze jQuery's ideas and skills, in the analysis process, I will break down all the ideas and native js used. It is a good thing to duplicate the wheel, and it must be repeated. How can we understand the essence of Originality without repeating the wheel? How can we innovate without repeating the wheel? The key lies in: making more and using less, the wheel was made to keep it in the lab for the time being, as my basketball teacher (colleague) told me, when practicing the ball, I needed to use the hand you were not familiar, however, you need to use the hand you are good at in the competition, that is, more exercises and less use. It is not until your hands are skillful that your wheels reach the original level that can be applied to the project.

 

 

 

 

 

Subsequent sections of this chapter:

 

Encapsulate event object interface application interface call chain source code analysis DOMReady topic

 

 

 

10. event handling

10.1 Overview

As a JavaScript library, we must first solve browser event compatibility issues, correctly manage events, and provide convenient interfaces for development. jQuery's event model implements these requirements in a simple and elegant way:

 

N custom jQuery. Event object, simulate and implement the W3C standard DOM Level 3 Event model, and unify the attributes and methods of the Event

 

N you can add multiple event handlers to an event type. You can add multiple event handlers at a time.

 

N provides convenient methods for common events, such as $ (selector). click (function ...); You can also trigger events by code, such as $ (selector). click ()

 

N supports custom events

 

N extended combined events: toggle (events that are bound sequentially when clicking), hover (move the mouse over and remove)

 

N expands one (only once executed), live-die (delayed binding), and delegate-undelegate (similar to live)

 

N provides unified event encapsulation, binding, execution, and destruction mechanisms

 

N optimize DOM ready events

 

Event Management is nothing more than binding, triggering, and destruction (see the basic knowledge in the next section). jQuery is encapsulated and improved with browser native support.

 

JQuery does not directly bind the event handler function to the DOM element, but uses $. data is stored in the cache $. cahce. First, assign a unique ID to the DOM element. The Bound event is stored in $. cahce [Unique ID] [$. expand] ['events'], and events are key-value ing objects, keys are event types, and corresponding values are arrays composed of event processing functions; finally, BIND (addEventListener/attachEvent) an event handler function eventHandle on the DOM element. This process is implemented by jQuery. event. add.

 

When an event is triggered, eventHandle is executed, and eventHandle goes to $. cache to find and execute the previously bound event processing function. This process is implemented by jQuery. event. trigger and jQuery. event. handle.

 

The event is destroyed by jQuery. event. remove implementation, remove to cache $. when all events in the cache are destroyed, call removeEventListener/detachEvent to destroy the event handler function eventHandle bound to the DOM element.

 

10.2 basic knowledge

Before we introduce and analyze jQuery's event model, if you are not familiar with the event model of the browser, we recommend that you read the event and Event Processing Section 17th of the JavaScript authoritative guide. Notes for key content:

 

L level 0 event model (actual standard APIs supported by all browsers)

 

N Method 1: as the event handle of the JavaScript property (bind the function directly to the event Property)

 

Elment. onclick = function (){

 

//...

 

}

 

 

N Method 2: Event handle of the HTML attribute (the function handle is directly assigned to the HTML attribute of the DOM element in string mode)

 

<Input type = "button" value = "level 0 event model" onclick = "alert (this. nodeName);"/>

 

 

L Level 2 event model (all browsers except Internet Explorer now support level 2 DOM event model)

 

N event propagation is carried out in three phases:

 

In the u capture phase, events are propagated from the Document object down the Document tree to the target node. If any ancestor of the target (not the target itself) specifically registers capture event handles, these handles will be run during event transfer.

 

U target stage, the appropriate event handle directly registered on the target will run. This is similar to the event processing method provided by the level 0 event model.

 

U bubble stage, the event will be propagated back from the target element to the Document level or blister back to the Document level of the Document Object.

 

Although all events are dominated by the capture phase of event propagation, not all types of events are blister. In general, the original input event bubbles (most events), while the advanced semantic event does not bubble (blue focus load unload)

 

N registers an event handle Element. addEventListener (String type, Function listener, boolean useCapture)

 

The time type of the u type event listener call. For example, load click mousedown

 

U listener when a specified type of event is assigned to this element, the event listener function is called. During the call, this listener function is passed to an Event object and called as a method registered on this element.

 

If u useCapture is true, the specified listener is called only in the capture phase of event propagation. The more common value is false, which means that the listener will not be called during the capture phase. When the node is an actual event Target or event from its original target to this node, the listener is called.

 

This method adds the specified event listener function to the listener function of the current node to process events of the specified type. If useCapture is true, the listener is registered as the capture listener. If useCapture is false, it registers a common event listener.

 

AddEventListener () may be called multiple times, and multiple event handles are registered for the same type of events on the same node. However, the DOM cannot determine the order in which multiple event handles are called.

 

If an event listener function is registered twice with the same type and useCapture parameters on the same node, the second registration will be ignored. If a new event listener is registered on a node when an event is being processed, a new event listener will not be called for that event.

 

When a Document Node is copied using the Node. cloneNode () method or the Document. importNode () method, the event listener registered for the original Node is not copied.

 

N delete an event handle Element. removeEventListener (String type, Function listener, boolean useCapture)

 

U type the event type of the event listener to be deleted

 

U listener: Event listener function to be deleted

 

U useCapture: true if it is the capture event listener to be deleted; false if it is a common event listener to be deleted.

 

This method deletes the specified event listener function. The type and useCapture parameters must be consistent with the corresponding parameters that call the addEventListener () method. If no event listener matching the specified parameter is found, this method does not do anything.

 

If an event listener function is deleted by this method, it is no longer called when a specified type of event occurs on the node. Even if an event listener is deleted by another event listener registered with the same type of events on the same node, it is no longer called.

 

N stop Event propagation Event. stopPropagation ()

 

N blocks the default action Event. preventDefault ()

 

L IE event model

 

N registers an event handle Element. attachEvent (String type, Function listener)

 

The type of the event to which the u type event listener calls, with a "on" prefix. For example, onload onclick onmousedown

 

U listener when a specified type of event is assigned to this element, the event listener function is called. It does not pass any parameters for this function, but it can get the event object from the Event attribute of the Window object.

 

This method is a specific method for registering events with IE. It has the same effect as the standard addEventListener () method (IE does not support it), but it also has some important differences with this function:

 

U because the IE event model does not support event capture, attachEvent () and detachEvent () only need two parameters: Event Type and handle Function

 

The event handle name passed by u to the IE method should contain the on prefix. For example, it uses onlick together with attachEvent (), rather than click used together with addEventListener ().

 

U does not have the Event object parameter when calling a function registered with attachEvent. Instead, they must read the event attribute of the Window object.

 

U uses the function registered by attachEvent () as the global function call, instead of the method call as the document element on the event. That is to say, when an event handle registered with attachEvent () is executed, this keyword references the Window object rather than the event Target element.

 

U attachEvent () allows the same event handle function to be registered multiple times. When an event of the specified type occurs, the number of registered Hassu calls is the same as the number of times it was registered.

 

N delete an Event listener Event. detachEvent (String type, Function listener)

 

The type of the event to be deleted by the u type event listener, with an on prefix. For example, onclick

 

U listener: Delete the event listener Function

 

This method removes the registration of event handle functions executed by the attachEvent () method. It is a specific replacement of the removeEventListener () method and IE. To delete an event function handle for an element, you only need to call detachEvent () using the same parameter that you originally passed attachEvent ()

 

N stop event propagation window. event. cancelBubule = true;

 

N blocks the default action window. event. returnValue = false