Don't let people on earth know what technology they don't understand. Let's take a look! -Chinese front-end UI framework kit (3) unveil the secrets of Advanced event management

Starting from today's chapter, I will focus on the event management of kitjs, try to use plain language to reveal how the mainstream JS framework implements its own independent event management function internally.

Kitjs demo address: http://xueduany.github.com/KitJs/KitJs/index.html

Source code: https://github.com/xueduany/KitJs
 

(1) Common DOM events

We generally support writing events in HTML

<A onclick = "alert (1)"> test </a>

Or bind it to the DOM object.

Document. getelementbyid ('A'). onclick = function () {alert (1 )}

Or Level 2 event

Document. getelementbyid ('A'). addeventlistener ('click', function () {alert (1)}, flase)

Or use the script tag

<Script for = "A" event = "onclick"> alert (1) </SCRIPT>

The W3C standard recommends binding the third method above. The second-level event method is used to decouple the strong dependency between HTML and Js.

(2) Problems

However, if we only use method 3 for JS programming, it is not enough because we will encounter the following problems:

1. browser compatibility. The names and parameters of browsers supported by the IE series and W3C for second-level event binding are inconsistent.

2. After binding level 2 events, you cannot know whether events, events, and content have been bound to the same element?

3. After being triggered by a level-2 event binding method, the sequence is not in the order prior to binding, but is executed randomly. Sometimes, we need to trigger the Method in order.

4. When an event of the same element is triggered, other events bound to the same element can be stopped without W3C standard APIs. W3C supports stopping bubbling.

5. In many cases, we use the anonymous Function Method to register Level 2 events without leaving a handle to register the event execution method. Therefore, it is difficult to use removeeventlistener to deregister the event.

(3) how to solve the problem with Kit

Okay. The JS framework exists to solve the above problems. Let's see how Kit handles the above problems.

In the API of Kit. JS, an EV (config) method exists.

This method accepts a map object, which contains four important parameters,

Elements to be bound by El

String Event Type

FN trigger execution Method

Scope can be omitted. Do you need to specify the this pointer? If not, the El at registration is passed as the this pointer.

(4) Code Analysis

Let's further look at the code implementation

Starting from the core

If the input parameter is not empty, create an object on El of the input parameter to save the event registration evreg of kitjs.

The evreg object contains two sub-objects: evregev, which stores registration events.

In the evregev object, save a key as the current registration event, and the value is an array. In the array, put the config parameter passed in by method EV in the order of first arrival and last arrival. Note that, this is an array !!! This is important because Arrays can save order.

There is also an anonymous method called evregfn to save event triggering,

We can see that evregfn is an anonymous event. At the beginning, it will judge the global variable window [me. constants. kit_event_stopimmediatepropagation] whether = true. If it is true, it will return and will not continue execution.

Next, he will receive the EV object triggered by the event, and append many objects to this EV in mergeif mode, such as target, currenttarget, and relatedtarget, to solve browser compatibility problems.

STOPNOW, stopdefault, and stopgoon are created to prevent the event from being triggered.

The following section is the key to evregfn. We will loop through the event array in the previously created evregev and retrieve the config parameter passed in by the previous EV method in sequence, execute the method in the config parameter. If the return value of the method is not empty, return its return value.

Finally, make a browser compatible, bind our evregfn anonymous method in the form of level 2 events.

(5) Summary

In short, Kit uses its own anonymous method to cache the event registration handle to an array, so that you can remember the order of events, it also provides an entry to identify previously registered events, parameters, methods, and so on, and provides compatibility with browser compatibility.

(6) deregister an event

With the help of kit to cache the event handle, it is easy to log out.

You can see that kit finds the corresponding event config through direct comparison, fn. tostring comparison, and FN. tostring (). Trim () comparison, and deletes it from the array.

(7) event Enhancement

We should also note that the kit has performed a mergeif operation on the system event object. First, why do we need to perform megerif? Because the object attribute of the system event is readonly and cannot be overwritten, only attributes that do not exist can be added.

Therefore, the kit can only be megerif. We all know that the event object of Each browser has an incompatibility, so we need the kit to fix these incompatibility. For example, ie has no target attribute and only srcelement, we can add the target attribute to realize W3C standard compatibility.

Of course, the repair alone cannot meet our needs. In many cases, we also need to make a small addition to the event object.

Except gettouches [0]. clientx, this code is not compatible on the PC once the anonymous function is like this,

What should we do? It doesn't matter. We can give event object mergeif our own attributes

Firstfingerclientx and so on. In this way, we can easily unify the code developed on the Mobile End and PC end.

Including, the next article is about HTML5 drag-and-drop. Advanced gesture events are all based on this architecture.

To add this question, why is it not as new as an event in extjs?

1. The native objects of the system have inheritance relationships and do not want to destroy them.

2. If you use your new object, it may cause the code to be removed from the framework and become unportable. You need to change the code content again.