Traditional and Modern events in javascript, modern javascript
As we all know, the modern event binding (attachEvent) in IE has many problems compared with the W3C standard (addEventListener,
For example, a memory leak occurs, and events are repeatedly added and triggered in reverse mode.
The following describes how to bind an encapsulated event to a traditional event:
AddEvent. ID = 1; // event counter function addEvent (obj, type, fn) {if (obj. addEventListener) {obj. addEventListener (type, fn, false);} else {// IE // determines whether the object exists. Ensure that only one object exists. Otherwise, each execution is performed, creates an event object // an array of Storage types and functions in the form of key-value pairs, ======== mount the event object array to the obj object to facilitate event deletion if (! Obj. events) {// Equivalent Structure: obj. events: {click: [fn1, fn2], mouserover: [fn1],...} obj. events ={};} var flag = false; // store the event object if (! Obj. events [type]) {// type data storage function obj. events [type] = []; // The first event type and function of this type are stored in the first obj of this type array. events [type] [0] = fn;} else {var eventfn = obj. events [type]; // cyclically traverse this type of object to check whether the event is repeated. If the repeated flag is true, return for (var I in eventfn) {if (eventfn [I] = fn) {flag = true; return ;}}// you can check whether the event is repeated. if the event is repeated, no function is stored, otherwise, save the event and execute if (! Flag) {// when this type already exists, the accumulative time type function is stored for this event, and eventfn [addEvent is executed cyclically. ID ++] = fn ;}// event function type Array function traversal call obj ["on" + type] = function () {var event = window. event; // store the event object // Add a function after the event object, call it when executed, and prevent the occurrence of default behavior, and synchronize the event with W3C standard. preventDefault = function () {this. returnValue = false ;}; // Add a function after the event object, a tail function, and stop bubbling. Event. stopPropagation = function () {this. cancelBubble = true ;}; // multiple functions of the execution type stored in cyclic traversal var evfn = obj. events [type]; for (var I in evfn) {// sequentially execute this type of event function, it solves the problem of coverage of traditional events and reverse triggering events bound to modern events. evfn [I]. call (this, event); // place the execution function in the environment of this object for execution, and pass an event object to the function callback using function removeEvent (obj, type, fn) {if (obj. removeEventListener) {obj. removeEventListener (type, fn, false);} else {// cyclically traverses this type of event function under this object, if yes, 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 entry of the array, but will retain the value of undefined evefn when accessing the location. splice (I, 1); // delete 1 digit from position I ,}}}}
The above is all the content of this article. I hope you will like it.