W3C和IE中的事件處理函數

    在上一篇文章中提到了關於傳統的JS中註冊事件對象的一些缺點和問題，下面是關於DOM2級的現代事件綁定。本文中設計到的HTML文件在文章最後

1、W3C事件處理函數

    「DOM2 級事件」定義了兩個方法，用於添加事件和刪除事件處理程序的操做：addEventListener()和 removeEventListener()。全部 DOM 節點中都包含這兩個方法，而且它們都接受 3 個參數；事件名、函數、冒泡或捕獲的布爾值(true 表示捕獲，false 表示冒泡)。看看這兩個方法在上一篇文章中的幾個問題是否解決

問題一：事件覆蓋問題----已經解決，下面兩個事件註冊函數都有值輸出

 

<span style="font-size:18px;">        window.addEventListener("load",function(){
		alert("abc");
		},false);

	window.addEventListener("load",function(){
		alert("cde");
	},false);</span>

問題二：重複註冊的問題----已解決。下面連續註冊三次，但只是輸出一個值

 

 

<span style="font-size:18px;"><span style="white-space:pre">	</span>function init(){
		alert("重複註冊");
	}

	window.addEventListener("load",init,false);
	window.addEventListener("load",init,false);
	window.addEventListener("load",init,false);</span>

 

問題三：this自動傳值的問題----已解決，下面的事件切換器中經過this可以表明box對象

 

<span style="font-size:18px;">	window.onload = function(){
		var box = document.getElementById("box");
		box.addEventListener("click",toBlue,false);
	}

	function toBlue(){
		this.className = "blue";
		this.removeEventListener("click",toBlue,false);	//必需要進行移除，不然只是可以切換一次
		this.addEventListener("click",toRed,false);
	}

	function toRed(){
		this.className = "red";
		this.removeEventListener("click",toRed,false);
		this.addEventListener("click",toBlue,false);
	}</span>

問題四：添加新的函數被覆蓋或者只是執行一次----已經解決

 

 

<span style="font-size:18px;">	window.addEventListener("load",function(){
		var box = document.getElementById("box");
		box.addEventListener("click",function(){
			alert("xin di han shu");
		},false);
		box.addEventListener("click",toBlue,false);

	},false)</span>

新功能：W3C提供的這兩個DOM2級事件綁定方法中，第三個參數表明的是是否能夠進行捕獲和冒泡操做，通常都爲冒泡，下面兩個輸出都執行

 

 

<span style="font-size:18px;">	window.addEventListener("load",function(){
		var box = document.getElementById("box");
		box.addEventListener("click",function(){
			alert("DIV");
		},false);
		document.addEventListener("click",function(){
			alert("document");
		},false);

	},false)</span>

2、IE事件處理函數----下面的兩個方法在高版本的瀏覽器中（包括IE11）已經不支持，可是IE8/IE9仍是支持，火狐和谷歌也不支持

 

IE 實現了與 DOM 中相似的兩個方法：attachEvent()和 detachEvent()。這兩個方法接受相同的參數：事件名稱和函數。
在使用這兩組函數的時候，區別：1.IE 不支持捕獲，只支持冒泡；2.IE 添加事件不能屏蔽重複的函數；3.IE 中的 this 指向的是 window 而不是 DOM 對象。4.在傳統事件上，IE 是沒法接受到 event 對象的，但使用了 attchEvent()卻能夠，但有些區別。

問題一：覆蓋問題----解決了，可是是倒敘輸出，後註冊的方法先執行

 

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

		alert("第二次");
	});</span>

問題二：重複註冊問題----沒有解決，下面一樣有三個值輸出

 

 

<span style="font-size:18px;">	window.attachEvent("onload",init);
	window.attachEvent("onload",init);
	window.attachEvent("onload",init);
	function init(){
		alert("重複");
	}
</span>

問題三：this自動傳值問題----沒有解決，這裏面的this表明的是window對象

 

 

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

問題四：添加額外的事件，只可以執行一次或者被覆蓋----解決了

 

 

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

新的功能：可以經過傳值的方法來獲取event對象，這應該是一個比較好的方面

 

 

<span style="font-size:18px;">//傳統方式不可以經過傳值來獲取event對象，可是經過attachEvent卻能夠
	window.onload = function(){
		var box = document.getElementById("box");
		//box.onclick = function(evt){
		//	alert(evt);	//傳統方式中沒法經過這種方法得到event對象
		//}

		box.attachEvent("onclick",function(evt){   //IE的現代事件綁定機制是能夠的
			//alert(evt);
			//alert(typeof evt);
			//alert(evt.target.tagName);
			alert(window.event.target.tagName);
		});
	}</span>

IE8下DOM2級的事件切換器

 

 

<span style="font-size:18px;">//IE事件切換器,經過event對象下的srcEvent屬性來獲取事件源this對象
	window.onload = function(){
		var box = document.getElementById("box");
		box.attachEvent("onclick",toRed);
	}

	function toRed(){
		var that = window.event.srcElement;	//不可以傳遞this，用這個來獲取事件源
		that.className = "red";
		that.detachEvent("onclick",toRed);
		that.attachEvent("onclick",toBlue);
	}

	function toBlue(){
		var that = window.event.srcElement;
		that.className = "blue";
		that.detachEvent("onclick",toBlue);
		that.attachEvent("onclick",toRed);
	}
</span>

 

 IE 中的事件綁定函數 attachEvent()和 detachEvent()已經被高版本的瀏覽器給淘汰了，平時也幾乎不用它， 有幾個緣由： 1.IE9 就將全面支持 W3C 中的事件綁定函數； 2.IE 的事件綁定函數沒法傳遞 this； 3.IE的事件綁定函數不支持捕獲； 4.同一個函數註冊綁定後， 沒有屏蔽掉； 5.有內存泄漏的問題

 

兼容下的事件切換器

因爲在網上搜索了一下，IE8任然有很大的市場份額，故必須得作瀏覽器的兼容

 

<span style="font-size:18px;">//跨瀏覽器獲取事件源
function getTag(evt){
	if(evt.target){	//W3C
		return evt.target;
	}else if(window.event.srcElement){
		return window.event.srcElement;		//IE
	}
}

//跨瀏覽器添加事件
function addEvent(obj,type,fun){
	if(obj.addEventListener){
		obj.addEventListener(type,fun,false);
	}else if(obj.attachEvent){
		obj.attachEvent("on"+type,fun);
	}
}

//跨瀏覽器移除事件
function removeEvent(obj,type,fun){
	if(obj.removeEventListener){
		obj.removeEventListener(type,fun,false);
	}else if(obj.detachEvent){
		obj.detachEvent("on"+type,fun);
	}
}

//給對象添加事件
addEvent(window,"load",function(){
	var box = document.getElementById("box");
	addEvent(box,"click",toBlue);
});

function toRed(evt){
	var that = getTag(evt);
	that.className = "red";
	removeEvent(that,"click",toRed);
	addEvent(that,"click",toBlue);
}

function toBlue(evt){
	var that = getTag(evt);
	that.className = "blue";
	removeEvent(that,"click",toBlue);
	addEvent(that,"click",toRed);
}</span>

 

涉及到關於HTML文件的東西：

 

<span style="font-size:18px;"> <head>
  <title> W3C和IE 中提供的DOM2級事件綁定函數 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <style>
	.red{
		width:200px;
		height:200px;
		background-color:red;
	}
	.blue{
		width:200px;
		height:200px;
		background-color:blue;
	}
  </style>
<script type="text/javascript" src="code2.js"></script>
 </head>

 <body>
  <div id="box">測試DIV</div>
 </body></span>