- HTML事件處理程序
<button onclick="clickMe(event)">dianji</button>
function clickMe(event){
console.log(event)
}
缺點:
- 時差問題,HTML元素已出現就觸發響應事件,但當時的事件處理程序可能尚不具備執行條件
- 處理程序的作用於在不同瀏覽器有不同結果
- DOM0級事件處理程序
js處理程序的傳統方式,將一個函數複製給一個事件處理程序屬性
var btn=document.getElementById('btn1');
btn.onclick=function(event){
console.log(this.id)
}
//刪除
btn.onclick=null;
- DOM2級事件處理程序
btn.addEventListener('click',function(){
console.log('click')
},false);
btn.removeEventListener('click',function(){
console.log('click');
},false);
//false:在冒泡的階段被觸發
- IE事件處理程序
var btn=document.getElementById('btn');
var hander=function(){
console.log("click")
}
btn.attachEvent("onclick",hander);
btn.detachEvent("onclick",hander)
- 跨瀏覽器事件處理程序
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;
}
}
}