JavaScript front-end UI Framework Kit Usage Guide KITJS event management _javascript Tips

From today's chapter, I will focus on the content of Kitjs event management, as far as possible in plain language to expose the mainstream JS framework is how to achieve their own independent event management functions.

(i) Ordinary DOM events

We can generally write events in HTML by supporting

<a onclick= "alert (1)" > Test </a>

Or after the DOM object is taken, it is bound

document.getElementById (' a '). Onclick=function () {alert (1)}

or level two event.

document.getElementById (' a '). AddEventListener (' click ', function () {alert (1)},flase)

or through the script tag

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

and the standards recommended by the consortium are the third way to bind, a two-level event in a way that is designed to decouple HTML and JS's strong dependencies

(ii) question

But if we just use mode 3 to do our JS programming, it is not enough, because we will encounter the following problems

1. browser compatibility, IE series and the support of the Web browser for the two-level event binding method name, parameters are inconsistent

2. After binding through Level 2 events, you cannot know if anyone has ever bound events to the same element, what events are bound, and what is the event content?

3. When triggered by a method that is bound by Level 2 events, the order is not executed randomly according to the order before the binding, but sometimes we need to follow the sequence of methods that are triggered

4. When the event of the same element is triggered, the standard API without the consortium supports stopping the triggering of other events bound to the same element, and the consortium support stops bubbling

5. In many cases, we register the level 2 event by means of an anonymous function, without leaving a handle to the execution method of the registered event, so it is difficult to unregister the event by RemoveEventListener

(iii) How the kit solves

The OK,JS framework exists to solve these problems, so let's see how kit handles the above issues.

In the Kit.js API, there is an EV (config) method

This method accepts the object of a map type, which has 4 important parameters,

The element that El needs to bind

String Event Type

The method that FN triggers execution

Scope can be omitted, whether the this pointer needs to be specified, if none, then the El as this pointer in the incoming registration

(iv) Code resolution

Let's take a closer look at the code implementation

Look directly at the core

If the incoming parameter is not empty, the object is established on the El of the incoming parameter to hold the Kitjs event registration Evreg

The Evreg object contains two child objects, one called Evregev, and the registered event is saved

In the Evregev object, save a key for the current registration event, value is an array, in the array in the order of arrival into the method Ev incoming config parameter, note that this is an array!!! This is important because arrays can be saved sequentially.

There is also an anonymous method called EVREGFN to save event triggers,

We can see that EVREGFN is an anonymous event, and at the beginning he will judge the variable window[me of global. CONSTANTS. Kit_event_stopimmediatepropagation] Whether ==true, if true, will return and no further execution

Then, looking down, he would take the event-triggered EV object and attach many objects to the EV in a mergeif way, like Target,currenttarget,relatedtarget to address browser compatibility issues.

Stopnow,stopdefault,stopgoon is a method created to prevent events from continuing to trigger.

The following section is the key to EVREGFN, we will cycle the creation of the Evregev inside the event array, in order, take out the previous EV method passed the config parameter, execute config parameter inside method, if the return value of the method is not empty, then return his return value

Finally, do a browser-compatible, in the way of Level 2 events, bind our Evregfn anonymous method.

(v) Summary

In simple terms, the kit uses an anonymous method of its own to cache event-registered handles into an array so that the sequence of events can be remembered, as well as provide access to the previously registered events, parameters, methods, and so on, and are compatible with browser compatibility.

(vi) Cancellation of events

With kit helping to cache event handles, logging off becomes easy.

You can see that kit finds the corresponding event config for recent by direct contrast, or fn.tostring contrast, and fn.tostring (). Trim (), removing from the array

(vii) Incident enhancement

We should also note that kit has done a mergeif operation on the system's event object, first of all why do Megerif, because the system event's Object attribute is ReadOnly, cannot overwrite, can only add the attribute which he does not have

So kit can only megerif, we all know that there is an incompatibility in the event object for each browser, so we need kit to fix these incompatibilities, ie no target attribute, only srcelement, We can add the target attribute to the compatibility of the standards of the Consortium

Of course, the only fix is not to meet our needs, many times, we also need to give the event object to do a little bit of weight gain

For example, when the iphone touchdown,touchmove development, we often have to take the offset of the single finger, and the offset of the single point, and need ev.targettouches[0].clientx, such code, But once the anonymous function is like this, it's not compatible with the PC,

What to do, it doesn't matter, we can give the event Object Mergeif our own attributes

Firstfingerclientx and so on, so that we can be very simple to implement the mobile end, the development of the PC side of the code unified.

Including, the next one to say HTML5 drag and drop, advanced gesture events are based on this infrastructure.

To add, why not like ExtJS, new one of their own event, is because

1. The system native object, has the certain inheritance relation, does not want to destroy

2. If you use your own new Object, you may cause code to break out of the framework, not portable, you need to change the content of the code again