跨瀏覽器 包括 document 事件 else if asc 事件處理程序 瀏覽器 操作

javascript 事件處理程序

1、普通事件處理程序

<input  type="button" value="click me" onclick="showMessage()"  /> 

function showMessage(){

	alert("clicked");

}

2、DOMO 級事件處理程序

 <span style="white-space:pre">	</span>//老方法
	 var btn=document.getElementById("myBtn");	
	 //dom擴展方法 支持主流瀏覽器，相似jquery語法
     var btn=document.querySelector("#myBtn");
     btn.onclick=function(){
     	alert("clicked!");
     };

3、DOM2 級事件處理程序

主要介紹這個。上面兩個大家應該都非常熟悉了。DOM2事件處理程序定義了兩個方法,用於加入和刪除事件處理程序操作:addEventListener() 和 removeEventListener() 全部DOM節點都包括這兩個方法，他們有3個參數 ：要處理的事件名、函數 、布爾值（true捕獲階段運行，false冒泡階段運行），一般填false 樣例：

 var btn=document.getElementById("myBtn");	
	 btn.addEventListener("click",function(){
	 	alert("clicked!");
	 },false);

 //傳入removeEventListener 的參數必須和addEventListener 一樣
	 btn.removeEventListener("click",function(){
	 	//這裏不會運行 沒實用--
	 	alert("clicked!");
	 },false);

IE實現了兩個類似的方法：attachEvent()和detachEvent() ，接受兩個參數。沒有八個bool值 樣例 ：

 	 var btn=document.getElementById("myBtn");	
     btn.attachEvent("onclick",function(){
     	alert("clicked");
     });

     btn.detachEvent("onclick",function(){
     	alert("clicked");
     });

所以 我們這邊也寫了個跨瀏覽器的事件處理程序：

//跨瀏覽器 事件處理程序
	var EventUtil= {

		addHandler:function(element,type,handler){
			if(element.addEventListener){

				element.addEventListener(type,handler,false);
			}else if(element.attachEvent){
				element.attachEvent("on"+type,handler);
			}else{
				element["on"+type]=handler;
			}
		},
		removeHandler:function(element,type,handler){
			if(element.removeEventListener){
				//除IE 其它
				element.removeEventListener(type,handler,false);
			}else if(element.detachEvent){
				//IE
				element.detachEvent("on"+type,handler);
			}else{
				element["on"+type]=handler;
			}
		}
	}

javascript事件處理程序