Traditional events in JavaScript and _javascript techniques of modern events

As we all know, the modern event binding (attachevent) in IE has many problems compared with the standard of the AddEventListener.

For example: memory leaks, recurring events and triggers are flashback execution, and so on.

The following is a traditional event method to handle the binding of an encapsulated event:

Addevent.id = 1;
    Event counter function addevent (obj, type, fn) {if (Obj.addeventlistener) {Obj.addeventlistener (type, FN, false); else {//IE//Determine if the object exists, guarantee only one object, or each execution, creates an event object//An array of types and functions in the form of a key-value pair, ======= the event object array to the Obj object to
        Convenience Event Deletion if (!obj.events) {//equivalent structure: obj.events: {click:[fn1,fn2], mouserover:[fn1], ...}
      Obj.events = {};
      var flag = false;
        Storage Event Object if (!obj.events[type]) {//Type data store each function obj.events[type] = [];
      The first event type and function of the type are stored in the first bit of the array of the type obj.events[type][0] = fn;
        else {var eventfn = Obj.events[type];
            Iterate over the type object to query whether the event repeats, if repeat flag is true, and return returns for (Var i in eventfn) {if (eventfn[i) = fn) {
            Flag = true;
          Return }//To determine if the event is repeated, repeat the function that does not carry out the event, or save the event and execute if (!flag) {//When the type already exists, a cumulative time type function store for the event
      , the last loop executes eventfn[addevent.id++] = fn;  }//Event function type Array function traversal call obj["on" +type] = function () {var event = window.event; Event object Storage//Add function after event object, call when executing, and prevent default behavior from occurring, sync Event.preventdefault = function () {THIS.R
        Eturnvalue = false;
        };
        After the event object, add a function, a tail function, and stop bubbling.
        Event.stoppropagation = function () {this.cancelbubble = true;

        };
        Loop traversal execution type stored multiple functions var evfn = Obj.events[type];   for (var i in EVFN) {//Sequential execution of this type of event function solves the problem of the coverage of traditional events and the reverse triggering event of modern event bindings Evfn[i].call (this, event); Executes the execution function in the context of the object and passes an event object to the function callback using the}}} function Removeevent (obj, type, fn) {if OBJ.R
    Emoveeventlistener) {Obj.removeeventlistener (type, FN, false);
      else {//loops through the object to see if the event function of that type functions that function, and if so, delete the event function var evefn = Obj.events[type];
      for (var i in Evefn) {if (evefn[i] = = fn) {//delete evefn[i]; This method can also delete the item for that array, but it retains the location when the value is undefined    Evefn.splice (i, 1);
 Remove 1-bit,}}} from position I

The above is the entire contents of this article, I hope you can enjoy.