JS--传统事件模型的问题

事件绑定分为两种情况：传统的事件绑定（内联模型、脚本模型），一种是现代事件绑定模型（DOM2级事件绑定）。

    内联模型的事件绑定是将事件写在元素标签中，将事件绑定函数当做元素的一种属性来实现的，这种绑定模型违反了HTML中分层的原则，故不讨论

<span style="font-size:18px;"><div id="box" onclick="alert('abc')">测试DIV</div> </span>

脚本模型，在单独的JS文件中，通过DOM来获取元素，然后为元素绑定事件等，下面讨论的问题都是用的脚本模型

<span style="font-size:18px;">window.onload = function(){
	var box = document.getElementById("box");
	box.onclick = function(){
		alert("box");
	}
}</span>

</pre><pre code_snippet_id="314036" snippet_file_name="blog_20140426_3_5927837" class="javascript" name="code"><span style="font-size:18px;"></span><h2><span style="font-size:18px;"><strong>问题一</strong>、一个事件绑定函数被触发多次，导致前面的会被后面的覆盖，以window.onload 为例</span></h2>

<span style="font-size:18px;">	//下面程序端只是输出 "第二次"
	window.onload = function(){
		alert("第一次");
	}

	window.onload=function(){
		alert("第二次");
	}</span>

    分别在第一个onload函数之前输出这个函数以及它的类型，发现，在没有定义之前，旧版的火狐输出的是undefined，新版的火狐、IE、谷歌都是null，类型都是object，在定义这儿函数之后，输出的类型都是function，代码段如下：

<span style="font-size:18px;">alert(window.onload);	//null	旧版火狐(3.8.6)输出为undefined
	alert(typeof window.onload);	//object

	window.onload = function(){
		alert("第一次");
	}

	alert(window.onload);	//当已经定义了这个函数的时候输出是这个函数的函数体
	alert(typeof window.onload);	//旧版和新版都是输出的undefined

	window.onload=function(){
		alert("第二次");
	}</span>

解决覆盖问题：可以创建一个保存器将它保存下来，然后在下一次注册函数的函数中先执行一次，然后再注册新的函数，利用了JS中没有块级作用域的概念

<span style="font-size:18px;">	window.onload = function(){
		alert("第一次");
	}

	//创建一个保存器
	if(typeof window.onload == "function"){
		var saved = null;
		saved = window.onload;	//保存上一个事件
	}

	window.onload=function(){
		if(typeof saved != "null"){
			saved();	//执行上一个事件
		}
		alert("第二次");	//执行本事件中的内容
	}</span>

<span style="font-size:18px;"> 	//上面的保存器中saved就相当于window.onload;saved()就相当于window.onload();但是window.onload后面
 	//是不能够直接加括号的，saved相当于注册的匿名函数，匿名函数的自我执行是直接在后面添加一个括号
 	//所以 saved() 相当于 windo.onload=function(){};
</span>

问题二、事件切换器（this自动传参以及可读性问题）

    页面上有两个样式表

<span style="font-size:18px;">  <style>
	.red{
		200px;
		height:200px;
		background-color:red;
	}
	.blue{
		200px;
		height:200px;
		background-color:blue;
	}
  </style></span>

<span style="font-size:18px;"><div id="box">测试DIV</div></span>

    切换器：在单击这个div的时候，切换样式

<span style="font-size:18px;">//点击页面上的某个元素，改变他们的背景颜色
	window.onload=function(){
		var box = document.getElementById("box");
		box.onclick = toRed;
	}

	//下面两个函数中 this 如果绑定到了box.onclick 的事件中，this是代表的box对象，在全局代表的是window

	function toRed(){
		this.className = "red";
		this.onclick = toBlue;
	}

	function toBlue(){
		this.className = "blue";
		this.onclick = toRed;
	}</span>

    上面这个切换器中存在一个问题就是，当在添加一个box.onclick=function(){}; 的时候，被新添加的函数又会被覆盖，

<span style="font-size:18px;">window.onload=function(){
		var box = document.getElementById("box");
		box.onclick = function(){	//被覆盖了，不会被执行
			alert("new");
		}
		box.onclick = toRed;
	}</span>

    为了解决这个覆盖的问题，可以在上面的新添加的匿名函数中执行后面的事件绑定函数

<span style="font-size:18px;">window.onload=function(){
		var box = document.getElementById("box");
		box.onclick=function(){
			alert("new");
			//toBlue();			//通过匿名函数来执行函数的话，里面的this代表的就是window
			toBlue.call(this);	//通过冒充调用将this传递过去
		}
	}</span>

为了解决上面的三个问题，我们自己写一个事件添加函数

    在JS中，数组是集数组、集合与字典一生的类型，对象操作可以使用数组操作来完成，window.onload 相当于window['onload'];

<span style="font-size:18px;">	window['onload'] = function(){
		alert("onload");
	}</span>

自己手动的写一个事件添加函数：

<span style="font-size:18px;">	function addEvent(obj,type,fun){//obj:要添加事件绑定函数的对象，type：事件名，fun：事件执行函数
		var saved = null;	//保存每次触发的事件处理函数
		if(typeof obj[type] == "function"){
			saved = obj[type];	//保存上一个事件
		}
		
		obj[type] = function(){
			if(saved){		//如果存在上一个事件，就先执行上一个事件
				alert(saved);
				saved();
			}
			fun();
		}
	}</span>

    通过这个事件函数，可以给元素添加多个事件绑定函数。并且都会执行

<span style="font-size:18px;">window.onload=function(){
		var box = document.getElementById("box");
			addEvent(box,"onclick",function(){alert("第一个");});
			addEvent(box,"onclick",function(){alert("第二个");});
			addEvent(box,"onclick",function(){alert("第三个");});
	}</span>

    将这个自定义的事件添加函数用在上面的事件切换器上面去，能够解决被覆盖的问题，但同样要注意this的传值需要我们手动传递。

<span style="font-size:18px;">	function addEvent(obj,type,fun){//obj:要添加事件绑定函数的对象，type：事件名，fun：事件执行函数
		var saved = null;	//保存每次触发的事件处理函数
		if(typeof obj[type] == "function"){
			saved = obj[type];	//保存上一个事件
		}
		
		obj[type] = function(){
			if(saved){		//如果存在上一个事件，就先执行上一个事件
				saved();
			}
			fun.call(this);		//注意this的作用范围，故要传递进去
			
		}
	}

	window.onload=function(){
		var box = document.getElementById("box");
			//addEvent(box,"onclick",function(){alert("OK");});
			addEvent(box,"onclick",toRed);
	}

	//这和上面通过window.onload的注册时一样的
	//addEvent(window,"onload",function(){
	///	var box = document.getElementById("box");
	///	addEvent(box,"onclick",function(){alert("OK");});
	//	addEvent(box,"onclick",toRed);
	//});

	function toRed(){
		this.className = "red";
		//this.onclick = toBlue;
		addEvent(this,"onclick",toBlue);
	}

	function toBlue(){
		this.className = "blue";
		//this.onclick = toRed;
		addEvent(this,"onclick",toRed);
	}</span>

问题三、浏览器假死

    上面通过我们自定义的函数，解决了传统的事件绑定的缺点，但是上面这个事件切换器，如果在火狐中运行，会发现当我们点击到一定的次数后，浏览器就会卡死。这是因为在我们自己写的这个事件添加函数，其本质是通过递归来实现的，JS中有一种概念叫闭包，它会把变量驻留在内存中，这种概念上和递归是一样的，当递归多次后，内存资源占用过多，导致浏览器假死的现象，而IE中有垃圾回收机制，它会帮我们回收一些资源然后释放，故不存在这种问题。解决这种假死办法就是每次定义之前，删除之前的东西。

<span style="font-size:18px;">	//移除事件处理函数，采用的是一刀切的方法
	function removeEvent(obj,type){
		if(typeof obj[type] == "function"){
			obj[type] = null;
		}
	}</span>

<span style="font-size:18px;">//调用函数修改为
function toRed() {
	this.className = 'red';
	removeEvent(this, 'click');
	addEvent(this, 'click', toBlue);	
}</span>

问题四、不能屏蔽重复注册问题

<span style="font-size:18px;">	addEvent("window","onload",init);	//init是一个函数
	addEvent("window","onload",init);
	addEvent("window","onload",init);</span>

   这种问题同样需要我们手动的去解决判断，比较麻烦，W3C在它的DOM2事件中解决了此问题，解决办法见下一章