Research on Event binding in JS

Nature: different libraries or tools always encapsulate different event binding forms, but the root cause is that the IE event model and W3C event model are different processing methods.

1) W3C event model: supports event capture and bubblingAddeventlistener ('type', function () {}, bool) removeeventlistener
('Type', function () {}, bool)

2) IE event model: only event bubbles are supported.Attachevent ('type', function (){});Detachevent ('type', fucntion (){});

* How to unify: if the third parameter of the W3C event binding function is set to false, event capturing is not supported.

* Native binding format:

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

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

* Note:

Of course, ie will bind the same event twice, but W3C will only bind the event once and ignore the subsequent event. Pay special attention to this, especially during development.

I remember when I used Baidu Tangram to solve the problem, I also encountered it. We will analyze the event binding form of Tangram later.

* Solutions available:

Of course, binding to objects can be solved in the form of class. Events will not be bound again. There are also a variety of implementation methods.

Now let's take a look at the event binding processing in some frameworks:

1) Tangram:

Baidu. event. on = function (element, type, listener) {type = type. replace (/^ on/I, ''); element = Baidu. dom. _ g (element); var reallistener = function (EV) {// 1. eventargument is not supported here because it is mounted across frame events // 2. element is used to modify this listener. call (element, Ev) ;}, Lis = Baidu. event. _ listeners, filter = Baidu. event. _ eventfilter, afterfilter, realtype = type; type = type. tolowercase (); // filter to filter if (filter & filt Er [type]) {afterfilter = filter [type] (element, type, reallistener); realtype = afterfilter. type; reallistener = afterfilter. listener;} // Mount if (element. addeventlistener) {element. addeventlistener (realtype, reallistener, false);} else if (element. attachevent) {element. attachevent ('on' + realtype, reallistener);} // store the listener to the array Lis [Lis. length] = [element, type, listener, reallistener, real Type]; return element;}; Baidu. event. UN = function (element, type, listener) {element = Baidu. dom. _ g (element); type = type. replace (/^ on/I ,''). tolowercase (); var Lis = Baidu. event. _ listeners, Len = Lis. length, isremoveall =! Listener, item, realtype, reallistener; // If the listener structure is changed to JSON, this loop can be saved and the performance can be optimized. // However, the UN usage frequency is not high, at the same time, when the listener is not large, // The performance consumption of the array traversal will not be Code Impact: // This optimization is not considered for the moment. When the while (Len --) {item = Lis [Len]; // listener exists, remove all type events of the element that are listened to by listener. // when listener does not exist, remove all type events of element if (item [1] ===type & item [0] === element & (isremoveall | item [2] ==== listener )) { Realtype = item [4]; Reallistener = item [3]; If (element. removeeventlistener) {element. removeeventlistener (realtype, reallistener, false);} else if (element. detachevent) {element. detachevent ('on' + realtype, reallistener);} Lis. splice (Len, 1) ;}} return element;

};

It can be seen that Tangram has changed the binding method, and its nature is 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 can be seen that addeventlistener and attachevent are supported for post-binding.

3) Prototype

Function observe (element, eventname, Handler ){

Element = $ (element); var responder = _ createresponder (element, eventname, Handler); If (! Responder) return element; If (eventname. include (':') {If (element. addeventlistener) element. addeventlistener ("dataavailable", responder, false); else {element. attachevent ("ondataavailable", responder); element. attachevent ("onlosecapture", responder) ;}} else {var actualeventname = _ getdomeventname (eventname); If (element. addeventlistener) element. addeventlistener (actualeventname, responder, false); else element. attachevent ("On" + actualeventname, responder);} return element ;}

We can see that the event models supported by IE and W3C are also processed. It's just a processing function, and the method is different.