Research on the processing process of JavaScript events in WebKit

Research on the processing process of JavaScript events in WebKit

This article mainly discusses how JavaScript events are registered and triggered in WebKit.

JS events can be registered using the attributes of DOM nodes or node. addEventListener () function;

Add the following attributes through the DOM node. The attributes of the node follow the form of event name after on, such as onclick and onload;

 

<Script type = text/javascript> function listener (e) {alert (hello world !); } </Script> Click

 

The registration form through the addEventListener () function is as follows. The complete form is:target.addEventListener(type, listener[, useCapture]);Type indicates the event type, listener indicates the response function, and useCapture indicates whether the event is triggered in the capture stage. If this parameter is not specified, the parameter is false;

 

Button<Script type = text/javascript> document. getElementById ('click'). addEventListener (click, listener); </script>

 

Shows the Event-related class relationships in WebKit:

1. EventTargetDatatMap: Global ing table, which establishes a ing relationship between Node and EventTargetData;

2. EventTargetData: The member variable firingEventIterators is a Vector. It is used to record the event type being triggered. If the Vector is not empty, it also indicates that it is in the firing stage. The member variable eventListenerMap is of the EventlListenerMap type;

3. EventlListenerMap: EventListeners is saved by event type. The member variable m_entires is Vector, and each item can be simplified to std: pair. Type;

4. JSLazyEventListener: the object triggered by the final response event. It stores the basic information of JS execution (source code or JSObject type function object );

 

In the first case, the time to start event registration is in the page parsing phase. After the button element is created, The onclick attribute is parsed and the corresponding EventListener is created based on the attribute value; in this case, the EventListener only saves the JS Source Code (which has not been converted into a function object in the JSC Virtual Machine) and adds the EventListener to the global Hash table;

In the second case, when JS executes "addEventListener ()" in the virtual machine, it will call native in WebCore to implement Node: addEventListener () according to the ing established by JSBindings (), this function creates EventListener Based on the Function objects passed in the virtual machine, and establishes the ing between the target node and EventListener (the button here) in the global Hash table;

The event registration process is compared in two cases:

 

The event triggering process involves the following steps:

1. find the target node that responds to the event: if it is a user interaction event, it is determined by the Hit Test algorithm; if it is an event generated inside the browser, there is usually a fixed response node, for example, the target node of the load event is the body node;

2. event distribution: events are distributed between the document and target in the order of (capture, at_target, bubble). capture is distributed from the root node document to the child node target, while bubble is the opposite;

3. event Response: In the dispatch process, if the event is registered with the current node, and useCapure is consistent with the event distribution order (that is, in the capture stage, when useCapture = true is registered on the current node, the event is responded. The event response is divided into two steps: (1) Find the EventListeners corresponding to the current node from the global ing table; (2) run the JS (source code or JSC function object) encapsulated by EventListeners In the JS Virtual Machine (the trigger sequence of the mouseup event ):

 

 

As mentioned above, events registered in the property only save the source code in EventListener, so necessary conversion of the source code will be performed before execution, formatted as follows:

 

 

      (function(event) {listener(event)})

In short, event registration is the process of establishing the ing relationship between node and response functions. This ing relationship is classified based on the event type, and event triggering is based on this ing relationship, the process of responding to function registration in different stages (capture and bubble;