Self-encapsulated javascript event queue function version

Self-encapsulated javascript event queue function version_javascript skills

WBOY

Release： 2016-05-16 16:44:47

Original

1423 people have browsed it

Background

There are several minor problems when using addEventListener() or attachEvent() to bind events in JavaScript:

1. Anonymous functions added using addEventListener() or attachEvent() cannot be removed.

Copy code The code is as follows:

var oBtn = document.getElementById('btn');
 
oBtn.addEventListener('click',function(){
 alert('button is clicked')
},false)

oBtn.reomveEventListener('click',function() {
 alert('button is clicked')
},false)
//The event on oBtn cannot be removed because an anonymous function is passed in 

2. ie6- In ie8, there is a problem of reverse order execution when using attachEvent() to bind multiple events.

Copy code The code is as follows:

var oBtn = document.getElementById('btn'); 

oBtn.attachEvent('onclick',function(){
 alert(1)
})

oBtn.attachEvent('onclick',function(){
 alert(2)
})

oBtn.attachEvent('onclick',function(){
 alert(3)
})
//ie9 Next execution sequence 1 , 2, 3
//Execution order under ie6-ie8 3, 2, 1

Solve the problem

I want to write a cross-browser event binding module so that it can be reused in the future. At the same time, I want to solve the appeal problem. JQuery internally uses event queues and data caching mechanisms to solve this problem. I looked at the relevant source code and found that it is really complicated. I tried some methods myself and managed to achieve it. The code snippet I posted was originally written in an object-oriented way. I didn't want it to be complicated, so I changed it to functions.

Copy code The code is as follows:

/*Interface for binding events
 *
 *@param {dom-DOM} and {type-string} and {fn-function} optional parameters {fnName-string}
 *@execute Create an event queue and add it to the DOM object attribute. 
 Add the event handler (function) to the event queue 
 You can add an identifier to the event handler to delete the specified event handler 
 */
 function bind(dom,type,fn,fnName){
 dom.eventQueue = dom.eventQueue || {};
 dom.eventQueue[type] = dom.eventQueue[type] | | {};
 dom.handler = dom.handler || {};

 if (!fnName) {
 var index = queueLength(dom,type);
 dom.eventQueue [type]['fnQueue' index] = fn;
 }
 else {
 dom.eventQueue[type][fnName] = fn;
 };

 if (! dom.handler[type]) bindEvent(dom,type);
};

/*Bind event
 *
 *@param {dom-DOM} and {type-string }
 *@execute Only binds an event once, handler is used to traverse the event handlers (functions) in the execution event queue
 *@caller bind()
 */
function bindEvent(dom, type){
 dom.handler[type] = function(){
 for(var guid in dom.eventQueue[type]){
 dom.eventQueue[type][guid].call(dom) ;
 }
 };

 if (window.addEventListener) {
 dom.addEventListener(type,dom.handler[type],false);
 }
 else {
 dom.attachEvent('on' type,dom.handler[type]);
 };
};

/*Interface for removing events
 *
 *@param {dom-DOM} and {type-string} optional parameters {fnName-function}
 *@execute If there is no identifier, execute unBindEvent()
 If there is an identifier, delete the specified Event handler, if the event queue length is 0, execute unBindEvent()
 */
function unBind(dom,type,fnName){
 var hasQueue = dom.eventQueue && dom.eventQueue[type]; 
 if (!hasQueue) return;
 if (!fnName) {
 unBindEvent(dom,type)
 }
 else {
 delete dom.eventQueue[type][fnName] ;
     if (queueLength(dom,type) == 0) unBindEvent(dom,type);
     }; > *@param {dom-DOM} and {type-string}
 *@execute Remove the bound event handler handler and clear the event queue
 *@caller unBind()
 */
function unBindEvent(dom,type){
 if (window.removeEventListener) {
 dom.removeEventListener(type,dom.handler[type])
 }
 else {
 dom. detachEvent(type,dom.handler[type])
 }

 delete dom.eventQueue[type];
};

/*Judge event queue length
 * 
 *@param {dom-DOM} and {type-string}
 *@caller bind() unBind()
 */
function queueLength(dom,type){
 var index = 0;
 for (var length in dom.eventQueue[type]){
 index ;
 }
 return index;
};





How to use

Copy code

The code is as follows:

var oBtn = document.getElementById('btn');

//Binding events
//Bind three click event functions for button at the same time
//ie6 -The execution order remains unchanged under ie8
bind(oBtn,'click',function(){
 alert(1);
})
bind(oBtn,'click',function(){ 
 alert(2);
},'myFn')
bind(oBtn,'click',function(){
 alert(3);
})

//Remove event
//Remove all bound click event functions, support removing anonymous functions
unBind(oBtn,'click')

//Remove only identifiers For the event function of myfn 
unBind(oBtn,'click','myFn')

Programming Ideas

The main idea of the program is to use the event queue as an attribute of the dom element object and add it to the dom element without polluting the global environment. This can solve the problem of binding data of multiple event functions of different event types to different dom elements. Storage issues.

Copy code The code is as follows:

//Event queue on dom element
dom {
 eventQueue : {
 'click' : {
 fnQueue1 : function,
 myfn : function,
 fnQueue3 : function
      }

        'mouseover': { 
 fnQueue1 : function,
 fnQueue2 : function
 }
 }
}

Add the event function to the event queue of the corresponding event type each time, and only bind the event once. When an event is triggered, the handler event function is executed, and the handler traverses and executes the event functions in the event queue.

unBind() removes all bound event functions if no identifier is passed in, supports removing anonymous functions, and removes the specified event function if there is an identifier.

The program logic is not complicated. There may be bugs and performance issues. If you are interested, you can provide guidance and communication.