Traditional and modern events in javascript

As you know, the modern event binding in IE (attachEvent) has a lot of problems compared to the standard in W3C (addEventListener),

Examples include memory leaks, flashbacks when events are added repeatedly and triggered.

Here's how to handle bindings that encapsulate events in the traditional event way:

addEvent.ID = 1;    //  Event counter 
  function addEvent(obj, type, fn){
    if(obj.addEventListener){
      obj.addEventListener(type, fn, false);
    } else {    // IE
      //  Determine if an object exists and ensure that there is only one 1 An object or each execution 1 Second, it will be created 1 Event objects 
      //  Stores types and functions in the form of key-value pairs 1 An array ,======= Mount an array of event objects to obj Object is to 

 The convenience event was deleted 
      if( !obj.events){
        //  Equivalent structure is: obj.events : {click:[fn1,fn2], mouserover:[fn1], ...}
        obj.events = {};
      }
      var flag = false;
      //  Store event object 
      if( !obj.events[type]){
        //  Type data stores each function 
        obj.events[type] = [];
        //  The control of the type 1 The second event type and the number of functions stored in the type array 1 position 
        obj.events[type][0] = fn;
      } else {
        var eventfn = obj.events[type];
        //  Loop through the type object to see if the event is repeated, and if so flag for true And, return return 
        for(var i in eventfn){
          if(eventfn[i] == fn ){
            flag = true;
            return;
          }
        }
        //  If the event is repeated, the function of the event is not stored, otherwise the event is stored and executed 
        if( !flag ){
          //  When the type already exists, the accumulative time type function is stored for the event, and the loop executes 
          eventfn[addEvent.ID++] = fn;
        }

      }

      //  Event functions   Type array   The function traverses the call 
      obj["on"+type] = function(){
        var event = window.event;  //  Storage of event objects 

        //  Add a function after the event object, call it when executed, and block default behavior W3C Standard synchronization 
        event.preventDefault = function(){
          this.returnValue = false;
        };
        //  Add a function after the event object, 1 A tail function. Stop the bubble. 
        event.stopPropagation = function(){
          this.cancelBubble = true;
        };

        //  Iterate through multiple functions stored by the execution type 
        var evfn = obj.events[type];
        for(var i in evfn){
          //  The sequential execution of this type of event function solves the problem of traditional event coverage and the reverse trigger of modern event binding 

 Issue of events 
          evfn[i].call(this, event);   //  Place the execution function in the context of the object , And pass 1 An event for 

 Like used for function callbacks 
        }
      }

    }
  }


  function removeEvent(obj, type, fn){
    if(obj.removeEventListener){
      obj.removeEventListener(type, fn, false);
    } else {
      //  Iterate over whether the event function of that type is a function of the object, 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 in the array, but it will retain the value at the time of access 

 for undefined
          evefn.splice( i, 1); //  From the first i Location deletion of 1 position 
        }
      }

    }
  }

This is the end of this article, I hope you enjoy it.