A general method of JavaScript binding event listening function _javascript tips

The usual methods of event binding in 3: traditional binding, the method of the common-system binding, ie binding method . However, it is important for us in actual development to need a generic, cross-browser binding approach. If we search on the internet there are many ways to find out, and here are some of the more well-known methods:

Before you begin the semester, you should discuss what a good addevent () method should achieve:

A, the same event handle that supports the same element can bind multiple listener functions;

b, if the same function is registered multiple times on the same event handle of the same element, then all registrations after the first registration are ignored;

C, this point in the body of the function should be the node that is handling the event (such as the node that is currently running the event handle);

D, the execution order of the listening function should be performed in the order of the bindings;

E. No use of event = event in function body window.event; to standardize event objects;

The Addevent () function written by John Resig

 function addevent (obj, type, fn) {
  if (obj.attachevent) {
   obj[' e ' +type+fn] = fn;
   OBJ[TYPE+FN] = function () {obj[' E ' +type+fn] (window.event);}
   Obj.attachevent (' On ' +type, Obj[type+fn]);
  else
   obj.addeventlistener (type, FN, false);
 }
 function removeevent (obj, type, fn) {
  if (obj.detachevent) {
   obj.detachevent (' on ' +type, Obj[type+fn]); 
   
    OBJ[TYPE+FN] = null;
  } else
   obj.removeeventlistener (type, FN, false);
 }
   

The function is so simple and understandable that it's really amazing. So let's take a look at the five points above:

for the 1th satisfaction;

For the 3rd and 5th, certainly also satisfied;

For the 2nd, it is not satisfied because AddEventListener () ignores duplicate registrations, while attachevent () does not ignore them;

The 4th, however, is not met because the DOM standard does not determine the order of time processing functions that invoke an object, so it should not be assumed that they are invoked in the order of registration.

But this function is still a very good function.

Second, Dean Edward wrote the Addevent () function

function addevent (element, type, handler) {if (!handler.$ $guid) handler.$ $guid = addevent.guid++;
  if (!element.events) element.events = {};
 var handlers = Element.events[type];
  if (!handlers) {handlers = Element.events[type] = {};
  if (element["on" + type]) {handlers[0] = element[' on ' + type];
 }} handlers[handler.$ $guid] = handler;
Element["on" + type] = Handleevent;
 
} addevent.guid = 1; function removeevent (element, type, handler) {if (element.events && Element.events[type]) {Delete Element.eve
 nts[type][handler.$ $guid];
 } function Handleevent (event) {var returnvalue = true; Event = Event | |
 Fixevent (window.event);
 var handlers = This.events[event.type];
  for (var i in handlers) {this.$ $handleEvent = handlers[i];
  if (this.$ $handleEvent (event) = = False) {returnvalue = false;
} return returnvalue;
 
};
 function Fixevent (event) {event.preventdefault = Fixevent.preventdefault;
 Event.stoppropagation = fixevent.stoppropagation;return event;
};
Fixevent.preventdefault = function () {this.returnvalue = false;}; 
 Fixevent.stoppropagation = function () {this.cancelbubble = true;};

This function uses the traditional binding method , so it can work in all browsers and will not cause memory leaks.

But for the 5 points originally proposed, the function only satisfies the first four points. Only the last point is not satisfied because the order of execution of the for/in statements in JavaScript is not specified in the order of assignment, although most of the time is performed in the order expected, so the order of the statements in a different JavaScript version or implementation may be different.

Third, Dean Edward's addevent () function improvement

 Array.prototype.indexOf = function (obj) {var result =-1, length = This.length, i=length-1;
   for (; i>=0; i--) {if (this[i] = obj) {result = I;
  Break
} return result;  } Array.prototype.contains = function (obj) {return (This.indexof (obj) >=0)} Array.prototype.append = function ( obj, nodup) {if (!) (
 Nodup && this.contains (obj)) {this[this.length] = obj;
 } Array.prototype.remove = function (obj) {var index = this.indexof (obj);
 if (!index) return;
Return This.splice (index, 1);
};   
 function addevent (element, type, fun) {if (!element.events) element.events = {};
 var handlers = Element.events[type];
  if (!handlers) {handlers = Element.events[type] = [];
  if (element[' + type]) {handlers[0] = element[' on ' + type];
} handlers.append (fun, true) element[' on ' + type] = Handleevent; The function removeevent (element, type, fun) {if (element.events && Element.events[type]) {element.Events[type].remove (fun);
 } function Handleevent (event) {var returnvalue = true, i=0; Event = Event | |
 Fixevent (window.event);
 var handlers = This.events[event.type], length = handlers.length;
  for (; i < length; i++) {if (Handlers[i].call (this, event) = False) {returnvalue = false;
} return returnvalue;
 function Fixevent (event) {event.preventdefault = Fixevent.preventdefault;
 Event.stoppropagation = fixevent.stoppropagation;
return event;
} Fixevent.preventdefault = function () {this.returnvalue = false;};
 

 Fixevent.stoppropagation = function () {this.cancelbubble = true;};

This function is my own to Dean Edward's addevent () function of the improvement, fully satisfied with the original 5 point of request, I hope to help you learn, thank you for your reading.