JavaScript binding Events

Essence: Different libraries or tools always encapsulate different forms of event binding, but the root cause is the different processing mode of IE event model and event model.

1) Event Model: Supports event capture and bubbling AddEventListener (' type ', function () {},bool) RemoveEventListener (' type ', function () {},bool)

2) IE Event Model: only event bubbling attachevent (' type ', function () {}) is supported; DetachEvent (' type ', Fucntion () {});

* How to unify: Setting the third parameter of the event binding function is false, then event snapping is not supported.

* Native Binding form:

Obj.addeventlistener (' type ', function () {},false);

Obj.attachevent (' type ', function () {});

* Is there any note:

Of course, ie binding 2 times to the same event will be repeated 2 times, but the world is bound only once, ignoring one subsequent event. This is a special attention, especially when it comes to development.

I remember when I used Baidu Tangram to deal with the problem, but also met, after we analyze the Tangram event binding form.

* Whether there is a solution:

Of course, the object binding can be solved in the form of class. The binding event is not repeated. The way of implementation is also varied.

Now look at some of the framework for event binding processing:

1) Tangram:

 baidu.event.on = function (element, type, listener) {    type = Type.replace (/^on/i, ');    ele ment = baidu.dom._g (Element);     var reallistener = function (EV) {          &NBS P 1. Eventargument is not supported here,   is a cross-frame event mount            //2. element is intended to fix this            Listener.call (element, Ev);       },        lis = baidu.event._listeners,        filter = baidu.event._eventfilter,  &N Bsp     afterfilter,        RealType = type;    type = type.tolowercase ();  &nbsp ; Filter     If (filter && Filter[type]) {        Afterfilter = Filter[type] (elemen T, type, Reallistener);        RealType = afterfilter.type;        Reallistener = afterfilter.listener;   }       //Event listener Mount     if (Element.addeventlistener) {        Element.addev Entlistener (RealType, Reallistener, False);   } else if (element.attachevent) {        Elem Ent.attachevent (' on ' + RealType, Reallistener);   }     //Store listener in array     lis[ Lis.length] = [element, type, listener, Reallistener, realtype];    return element;};  baidu.event.un = function (element, type, listener) {    element = Baidu.dom._g (Element);    Typ E = Type.replace (/^on/i, "). toLowerCase ();        var lis = baidu.event._listeners,          len = lis.length,        Isremoveall =!listener,      &NBS P item,        RealType, reallistener;       //If the structure of listener is changed to json  & nbsp This cycle can be saved, optimized for performance    //But due to the low frequency of use of UN and the ListenEr not much time    //traversing array performance consumption does not affect the code    //temporarily does not consider this optimization     while (len--) {        I TEM = lis[len];               //listener exists, Remove all types of type events with listener listener for the element with the type event        ///listener not present, removing all of the kind events for element,       & nbsp if (item[1] = = = type            && item[0] = = element        &N Bsp   && (Isremoveall | | item[2] = = = Listener)) {            RealType = ITEM[4];&NB Sp           Reallistener = item[3];            if (element.removeeven Tlistener) {                Element.removeeventlistener (RealType, Reallistener, F Alse);           } else if (element.detachevent) {                element.detachevent (' on ' + reaLType, Reallistener);           }            Lis.splice (Len, 1);       }   }        return element;

};

It can be seen that Tangram is only a change in the way of binding, its nature is still the same.

2) jquery

Only use Addeventlistener/attachevent if the special events handler returns false

if (!special.setup | | special.setup.call (elem, data, namespaces, eventhandle) = = = = False) {
Bind The global event handler to the element
if (Elem.addeventlistener) {
Elem.addeventlistener (Type, eventhandle, false);
} else if (elem.attachevent) {
Elem.attachevent ("On" + Type, eventhandle);
}

}

It is also possible to see whether AddEventListener and attachevent are supported for binding after processing.

3) prototype

function observe (element, EventName, handler) {

    element = $ (Element);     var responder = _createresponder (element, eventName, handler); &nbs p;    if (!responder) return element;     if (eventname.include (': ')) {      if (E Lement.addeventlistener)         Element.addeventlistener ("dataavailable", responder, false);       Else {        element.attachevent ("ondataavailable", responder);    &N Bsp   Element.attachevent ("Onlosecapture", responder);     }   } else {      VA R actualeventname = _getdomeventname (eventName);       if (Element.addeventlistener)     & nbsp   Element.addeventlistener (Actualeventname, Responder, false);      else        Element.attachevent ("on" + actualeventname, responder);   }     return element; } 

It can be seen that the IE and the internet of things supported by the event model for processing. is just a function of processing, in a different way.

JavaScript binding Events