`
cxy020
  • 浏览: 61462 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js事件(5)

 
阅读更多 
<html>
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<title>js事件封装</title>
	<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
	<input id="btn1" type="button" value="btn1" />
	<input id="btn2" type="button" value="btn2" />
</body>
</html>

<script type="text/javascript">
	//兼容ie浏览器测试
	var console = console || {};
	console.log = console.log || function(a){
		alert(a);
	}

	var Event = function(){
		//保存注册事件数据
		var eventMap = {};

		//生成唯一key
		function domKey(dom,type){
			//id一般都是唯一的,如果没有id就用nodeName意思一下吧.
			var id = dom.id || dom.nodeName;
			var key = id + "-" + type;
			return key;
		}

		//事件处理
		function eventHandle(t,type,dom,fn,scope,data){
			switch(t){
				case 1:
					var fun = function(evt){
						evt = evt || event;
						fn.apply(scope,[evt,data])
					};
					//拼接一个唯一的key,保存匿名事件函数
					var key = domKey(dom,type);
					eventMap[key] = eventMap[key] || [];
					//保存函数指针,callee是调用自身函数
					eventMap[key].push(fun);

					//绑定事件
					if(document.attachEvent){
						//IE
						dom.attachEvent("on" + type,fun);
					}
					else{
						//非IE
						dom.addEventListener(type,fun,false);
					}
				break;
				case 2:
					//移除事件
					//比较遗憾的是,我还只能想到移除dom的全部事件,并不能移除dom的指定函数事件.
					var key = domKey(dom,type);
					var handler = eventMap[key];
					if(handler instanceof Array){
						for(var i = 0,len = handler.length; i < len; i++){
							if(document.attachEvent){
								dom.detachEvent("on" + type,handler[i]);
							}
							else{
								dom.removeEventListener(type,handler[i],false);
							}
						}
						eventMap[key] = [];
					}
				break;
			}
		}

		//dom分析
		function analyze(t,dom,type,fn,scope,data){
			//判断dom是否有多个
			if(dom.length){
				for(var i = 0,len = dom.length; i < len; i++){
					var el = dom[i];
					//判断是否是dom
					if(el && el.nodeName){
						//绑定事件
						eventHandle(t,type,dom,fn,scope,data);
					}
				}
			}
			else{
				//判断是否是dom
				if(dom && dom.nodeName){
					//绑定事件
					eventHandle(t,type,dom,fn,scope,data);
				}
			}
		}

		function bind(dom,type,fn,scope,data){
			analyze(1,dom,type,fn,scope,data);
		}
		function unbind(dom,type){
			analyze(2,dom,type);
		}

		return {
			bind:bind,
			unbind:unbind
		}
	}();



	//一个简单的例子
	var name = "bobo";
	function Test(){}
	Test.prototype = {
		name:"chxy",
		say1:function(){
			//this == Test
			console.log(this.name + " say1");
		},
		say2:function(){
			//this == window/Test
			console.log(this.name + " say2");
		}
	};

	var t = new Test();
	var btn1 = document.getElementById("btn1");
	Event.bind(btn1,"click",t.say1,t);
	Event.bind(btn1,"click",t.say2,t);

	var btn2 = document.getElementById("btn2");
	Event.bind(btn2,"click",t.say2,window);

	//移除dom全部事件
	//Event.unbind(btn1,"click");

	/*
	这样事件类基本就封装好了,并且看上去已经很优化了.
	不过还是有一个隐藏问题的,就是每次注册事件都需要判断浏览器类型,其实是做了很多次重复工作,
	因为程序运行的时候,不可能中途换浏览器,所以应该只检测一次就可以了.
	*/

	var Event = function(){
		//保存注册事件数据
		var eventMap = {};

		//生成唯一key
		function domKey(dom,type){
			//id一般都是唯一的,如果没有id就用nodeName意思一下吧.
			var id = dom.id || dom.nodeName;
			var key = id + "-" + type;
			return key;
		}

		//添加事件,采用延迟加载
		function addEvent(dom,type,fn){
			if(document.attachEvent){
				//IE
				addEvent = function(dom,type,fn){
					dom.attachEvent("on" + type,fn);
				}
			}
			else{
				//非IE
				addEvent = function(dom,type,fn){
					dom.addEventListener(type,fn,false);
				}
			}
			//调用新函数,已经覆盖了原来的addEvent,不需要再判断浏览器了.
			addEvent(dom,type,fn);
		}

		//删除事件,采用延迟加载
		function removeEvent(dom,type,fn){
			if(document.attachEvent){
				removeEvent = function(dom,type,fn){
					dom.detachEvent("on" + type,fn);
				}
			}
			else{
				removeEvent = function(dom,type,fn){
					dom.removeEventListener(type,fn,false);
				}
			}
			//调用新函数,已经覆盖了原来的removeEvent,不需要再判断浏览器了.
			removeEvent(dom,type,fn);
		}

		//事件处理
		function eventHandle(t,type,dom,fn,scope,data){
			switch(t){
				case 1:
					var fun = function(evt){
						evt = evt || event;
						fn.apply(scope,[evt,data])
					};
					//拼接一个唯一的key,保存匿名事件函数
					var key = domKey(dom,type);
					eventMap[key] = eventMap[key] || [];
					//保存函数指针,callee是调用自身函数
					eventMap[key].push(fun);

					//绑定事件
					addEvent(dom,type,fun);
				break;
				case 2:
					//移除事件
					//比较遗憾的是,我还只能想到移除dom的全部事件,并不能移除dom的指定函数事件.
					var key = domKey(dom,type);
					var handler = eventMap[key];
					if(handler instanceof Array){
						for(var i = 0,len = handler.length; i < len; i++){
							//移除事件
							removeEvent(dom,type,handler[i]);
						}
						eventMap[key] = [];
					}
				break;
			}
		}

		//dom分析
		function analyze(t,dom,type,fn,scope,data){
			//判断dom是否有多个
			if(dom.length){
				for(var i = 0,len = dom.length; i < len; i++){
					var el = dom[i];
					//判断是否是dom
					if(el && el.nodeName){
						//绑定事件
						eventHandle(t,type,dom,fn,scope,data);
					}
				}
			}
			else{
				//判断是否是dom
				if(dom && dom.nodeName){
					//绑定事件
					eventHandle(t,type,dom,fn,scope,data);
				}
			}
		}

		function bind(dom,type,fn,scope,data){
			analyze(1,dom,type,fn,scope,data);
		}
		function unbind(dom,type){
			analyze(2,dom,type);
		}

		return {
			bind:bind,
			unbind:unbind
		}
	}();

	var btn1 = document.getElementById("btn1");
	Event.bind(btn1,"click",t.say1,t);
	Event.bind(btn1,"click",t.say2,t);

	var btn2 = document.getElementById("btn2");
	Event.bind(btn2,"click",t.say2,window);

	/*
	这样就只会有一次判断浏览器类型,是不是很有意思.
	*/

	/*
	知识点:
	1.apply/call可以动态改变函数的作用域
	2.采用了匿名函数的方式封装事件接口.
	*/
</script>

 

分享到：
| js事件(4)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics