前端開發(fā) JavaScriptD DOM
1.事件流
事件流描述的是從頁面中接受事件的順序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流
- 事件冒泡：事件從最開始的最具體的元素接受，然后逐級向上傳遞，傳遞到最不具體的元素（節(jié)點，也就是文檔）。打個比方就是從處理這件事的業(yè)務員傳遞到總經理的過程。
- 事件捕獲：接受過程和事件冒泡相反，最不具體元素最先接受事件然后傳遞到最具體元素。也就是總經理想起一個什么事然后叫業(yè)務員辦這個事。
2.事件處理程序
1.HTML事件處理程序
2.DOMO級事件處理程序
3.DOM2級事件處理程序
DOM2級事件定義了兩個方法：用于處理指定和刪除事件處理程序的操作，addEventListener()和removeEventListener()。接受三個參數：要處理的事件名、作為事件處理程序的函數和布爾值。
4.IE事件處理程序
attachEvent()添加事件
detachEvent()刪除事件
這兩個方法接收相同的兩個參數：事件處理程序名稱與事件處理函數
跨瀏覽器的事件處理程序：
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;
},
getType:function(event){
return event.type;
},
getElement: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;
}
}
}
使用：
window.onload=function(){
var go=document.getElementById('go'),
box=document.getElementById('box');
eventUtil.addHandler(box,'click',function(){
alert('我是整個父盒子');
});
eventUtil.addHandler(go,'click',function(e){
//e=eventUtil.getEvent(e);
e=e || window.event;
alert(eventUtil.getElement(e).nodeName);
eventUtil.preventDefault(e);
eventUtil.stopPropagation(e);
});
}
3.事件對象
1.DOM中的事件對象
(1)、type:獲取事件類型
(2)、target：事件目標
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默認行為
2.IE中的事件對象
(1)、type:獲取事件類型
(2)、srcElement：事件目標
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默認行為
