javascript事件机制学习（一）——个人实现

起因：在面试的时候被问到在不提供任何DOM API，不能使用jQuery，如何实现事件的监听和触发。

需求：需要在全局范围监听事件。为了方便事件类型的扩展，提供注册事件，移除事件的方法。对于某一类的时间，提供监听事件，触发事件，和移除事件三种方法。因此针对需求，设计以下的数据结构：

结构：用一个Object存储全部的事件，其中包括三个（或多个）handler，为addHandler，removeHandler和setupHandler。分别用于在第一次注册注册事件的时候，监听该类型的事件时，以及移除对改事件的监听时执行回调。EventQueue用于存储，监听该时间的全部事件对象。on用于将事件对象添加到响应的队列里面，off用于将事件对象从监听队列里移除，fire用于触发这一类事件。依次执行队列里面的时间。

代码分析：

整体数据结构：

 var EventManager = function(){
   	  this.eventMap = {};
   	  this.handlers = ["add","remove","setup"];
   	  this.guid = 0;
   };

注册事件：

EventManager.prototype.registerEvent = function(name,eventObj) {
   	 var eventMap = this.eventMap;

   	 if(!eventMap.hasOwnProperty(name)){
   	 	eventMap[name] = {};

   	 	for(var i=0,len=this.handlers.length; i<len; i++){
   	 		var handlerName = this.handlers[i] + "Handler";
   	 		eventMap[name][handlerName] = eventObj[handlerName] || null;
   	 	}

   	 	eventMap[name]["queue"] = [];
   	 }else{
   	 	for(var key in eventObj){
   	 	    if( !key.test(/'queue'/g)){
   	 	      eventMap[name][key] = eventObj[key];
   	 	    }else{
   	 	    	eventMap[name][key].concat(eventObj[key].slice(0));
   	 	    }
   	 		
   	 	}
   	 }

   };

注册事件分为两种情况，一种是该事件已被注册的情况。这种情况，把提供的eventObj的时间队列添加到原有的队列后面。如果还没有注册该事件，则根据eventObj中提供的handler，创建新的监听对象。

移除事件类型：

EventManager.prototype.removeEvent = function(name){
   	  var eventMap = this.eventMap;

   	  if(!eventMap.hasOwnProperty(name)){console.log("has no such event type"); return ;}

   	  delete eventMap[name];
   }

先检查存不存在该类型的事件，存在的话，则从eventMap中delete掉。

监听事件：

EventManager.prototype.on = function(elem,type,callback){
   	  var args = Array.prototype.slice.call(arguments, 0);
   	  if(args.length < 3 || !this.eventMap.hasOwnProperty(type)) return ; // 如果参数提供的不齐全，或者没有该type，那么直接返回

      //这里应该调整一下参数，先不实现
      var queue = this.eventMap[type]["queue"],
          addHandler = this.eventMap[type]["addHandler"],
          setupHandler = this.eventMap[type]["setupHandler"],
          i = 0, len = queue.length,dom = "dom";

      
      for(; i<len; i++){
      	if(elem.nodeType == 1 && queue[i][dom] === elem){//该元素已经监听过的情况
           addHandler &&addHandler.apply(elem);

           queue[i]["callbacks"].push(callback);
           break;
      	}
      }

      if(i == len){ // 该元素还没有监听任何事件
      	var temp = {
      		"id" : this.guid++,
      		"dom" : elem,
      		"callbacks" : []
      	};

      	setupHandler && setupHandler.apply(elem);
      	temp["callbacks"].push(callback);

      	queue.push(deepClone(temp));
      	temp = null;
      }
   }

首先需要确保监听类型，对象和回调都提供。并且要判断监听的事件类型是否存在。如果不满足条件，直接返回。

然后需要判断，该elem是否已经监听过这个事件了。如果有，则把callback放到原来的回调队列里面。如果还没有监听的话，那么产生一个{}，其中包括id，执行的对象elem和回调队列。将该obj放到监听事件的队列里面。

触发事件：

EventManager.prototype.fire = function(elem,type){
     var queue = this.eventMap[type]["queue"];

     if(arguments.length < 2 || queue === undefined) return;

     var i=0,len = queue.length;
     for(; i<len; i++){
        var context = queue[i]["dom"],
            callbacks = queue[i]["callbacks"];

        callbacks.forEach(function(callback){
           callback.call(context,elem);
        });
     }
   }

首先也要确保传参正确，并且存在该事件类型。如果没有，则直接返回。然后依次取出queue里面的监听对象。获取执行回调的context和回调们。依次执行

移除事件：

EventManager.prototype.off = function(elem,type){
   	  var queue = this.eventMap[type]["queue"];

   	  if(arguments.length < 2 || queue == undefined) return ;

   	  var i=0, len= queue.length,removeHandler = this.eventMap[type]["removeHandler"];

   	  for(; i<len; i++){
   	  	 if(elem.nodeType == 1 && queue[i]["dom"] === elem){
   	  	 	removeHandler && removeHandler.apply(elem);
   	  	 	queue.splice(i,1);
   	  	 	break;
   	  	 }
   	  }
   }

找到该元素在该类型中的事件对象，然后从queue中移除。并且执行removeHandler

完整代码：

https://github.com/lizzyDeng/personalLib/blob/master/EventManager.js

javascript事件机制学习（一）——个人实现

猜你喜欢