事件處理程序的認識

  1. HTML事件處理程序
<button onclick="clickMe(event)">dianji</button>
function clickMe(event){
	console.log(event)
		
}

缺點:

  • 時差問題,HTML元素已出現就觸發響應事件,但當時的事件處理程序可能尚不具備執行條件
  • 處理程序的作用於在不同瀏覽器有不同結果
  1. DOM0級事件處理程序

js處理程序的傳統方式,將一個函數複製給一個事件處理程序屬性

var btn=document.getElementById('btn1');
	btn.onclick=function(event){
	console.log(this.id)
}
//刪除
btn.onclick=null;
  1. DOM2級事件處理程序
btn.addEventListener('click',function(){
	console.log('click')
},false);
btn.removeEventListener('click',function(){
	console.log('click');
},false);
//false:在冒泡的階段被觸發
  1. IE事件處理程序
var btn=document.getElementById('btn');
var hander=function(){
    console.log("click")
}
btn.attachEvent("onclick",hander);
btn.detachEvent("onclick",hander)
  1. 跨瀏覽器事件處理程序
	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){
				element.removeEventListener(type,handler,false);
			}else if(element.detachEvent){
				element.detachEvent("on"+type,handler)
			}else{
				element["on"+type]=null;
			}
		},
		getEvent:function(event){
			return event?event:window.event;
		},
		getTarget:function(event){
			return event.target||event.srcElement;
		},
		preventDefault:function(event){
			if(event.preventDefault){
				event.preventDefault();
			}else{
				event.returnValue=false;
			}
		},
		stopPropagation:function(event){
			if(event.stopPropagation){
				event.stopPropagation();
			}else{
				event.cancelBubble=true;
			}
		}

	}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章