JavaScript implements simple on event binding _javascript Tips

Implement a simple on and off method

Introduced:

Event object:

Funclist: {},//Save Delegate bound method
Iefunclist: {}//Save the binding method under IE

The on and off method in the Event object, the main call
Event.addevent, Event.delegatehandle these two methods

event.addevent: Call the underlying addeventlistener to add a listener event
Event.delegatehandle: When an event occurs, the element that has an event delegate is judged and the corresponding callback function is executed as the event bubbles up.

Addevent/offevent:

Obj.addeventlistener (Type, FN, false);
Obj.removeeventlistener (Type, FN, false);

Code-event.js

/** * addevent * author laynezhou@tencent.com/window.
Event = {}; var Event = {funclist: {},///Save Delegate Bound method Iefunclist: {},//Due to methods saved in IE bound on:function (obj, selector, type
    , FN) {if (!obj | |!selector) return FALSE;
    var fnnew = event.delegatehandle (obj, selector, FN);
    Event.addevent (obj, type, fnnew); /* The bound method is deposited into the event.funclist so that the binding operation can then be untied/if (!
    Event.funclist[selector]) {Event.funclist[selector] = {}; } if (!
    Event.funclist[selector][type]) {Event.funclist[selector][type] = {};
  } EVENT.FUNCLIST[SELECTOR][TYPE][FN] = fnnew; }, Off:function (obj, selector, type, fn) {if (!obj | |!selector | |!)
    Event.funclist[selector]) {return false;
    var fnnew = Event.funclist[selector][type][fn];
    if (!fnnew) {return;
    } event.offevent (obj, type, fnnew);
  EVENT.FUNCLIST[SELECTOR][TYPE][FN] = null; }, Delegatehandle:function (obj, selector, fn) {/* Implements the delegate conversion method, when event bubbling rises, conforms to the barTo execute the callback function/var func = function (event) {var event = Event | | window.event; var target = Event.srcelement | |
      Event.target;

      var parent = target; function contain (item, elmname) {if (Elmname.split (' # ') [1]) {//by ID if (item.id && item.id = =
          = Elmname.split (' # ') [1]) {return true; } if (Elmname.split ('. ') [1]) {//by class if (Hasclass) (item, Elmname.split ('. ')
          [1])) {return true; } if (Item.tagname = Elmname.touppercase ()) {return true;//by TagName} ret
      Urn false; while (parent) {*/* If the element that is triggered belongs to a child of the (selector) element.

          */if (obj = = parent) {return false;//trigger element is itself} if (contain (parent, selector)) {
          Fn.call (obj, event);
        Return
      parent = Parent.parentnode;
    }
    };
  return func; }, Addevent:function (target, type, FN){if (!target) return false;

      var add = function (obj) {if (Obj.addeventlistener) {Obj.addeventlistener (type, FN, false); else {//for IE if (!
        Event.iefunclist[obj]) Event.iefunclist[obj] = {}; if (!
        Event.iefunclist[obj][type]) Event.iefunclist[obj][type] = {};
        EVENT.IEFUNCLIST[OBJ][TYPE][FN] = function () {fn.apply (obj, arguments);
        };
      Obj.attachevent ("On" + Type, EVENT.IEFUNCLIST[OBJ][TYPE][FN]);  } if (target.length >= 0 && target!== window &&!target.tagname) {for (var i = 0, L = Target.length; I < L;
    i++) {Add (Target[i])}} else {add (target);
    }, Offevent:function (target, type, fn) {if (!target) return false;

      var remove = function (obj) {if (Obj.addeventlistener) {Obj.removeeventlistener (type, FN, false); else {//for ie if (! Event.iefunclist[obj] | | ! Event.iefuNclist[obj][type] | | !
        EVENT.IEFUNCLIST[OBJ][TYPE][FN]) {return;
        } obj.detachevent ("On" + Type, EVENT.IEFUNCLIST[OBJ][TYPE][FN], false);
      EVENT.IEFUNCLIST[OBJ][TYPE][FN] = {};  } if (target.length >= 0 && target!== window &&!target.tagname) {for (var i = 0, L = Target.length; I < L;
    i++) {remove (Target[i])}} else {remove (target);


 }
  },

};

Code-demo.html

<!
DOCTYPE html>