1.事件冒泡
2.事件捕獲
事件處理程序
1.HTML事件處理程序
2.DOM 0級(jí)事件處理程序
3.DOM 2級(jí)事件處理程序 ? ? addEventListener(),removeEventListener()
4.IE事件處理程序 ? ?attachEvevnt() ? ?detachEvent()
DOM中的事件對(duì)象
1.DOM中的事件對(duì)象
(1)type屬性 ? ? ?獲取事件的類型
(2)target屬性 ? ? ?用于獲取事件的目標(biāo)
(3)stopPropagation() ? ? ? 阻止事件冒泡
(4)preventDefault() ? ? ? 阻止事件的默認(rèn)行為
2.IE中的事件對(duì)象
(1)type屬性 ? ?用于獲取事件的類型
(2)srcElement屬性 ? 用于獲取事件的目標(biāo)
(3)cancelBubble屬性 ? ?阻止事件冒泡 ?設(shè)置為true表示阻止冒泡,設(shè)置為false表示不阻止冒泡
(4) rutrunValue屬性 ? 設(shè)置為false表示阻止事件的默認(rèn)行為
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] = handler;
}
},
//事件對(duì)象
getEvent:function(event){
return event?event:window.event;
},
//獲取事件類型
getType:function(event){
return event.type;
},
//獲取事件的目標(biāo)
getElement:function(event){
return event.target || event.srcElement;
},
//阻止事件的默認(rèn)行為
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
}
//阻止事件冒泡
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}