1.事件捕獲與事件冒泡
事件捕獲 ：事件從頂層元素(document)傳播到具體發(fā)生事件的元素（Netscape）
事件冒泡 ：事件從具體元素傳播到頂層元素 （IE）
事件流模型
2.事件處理
- HTML 事件處理
<div id="clickItem" onclick="clickMe(this)"></div>
<script>
function clickMe() {
alert(arguments[0].id+" clicked!");
}
</script>
- DOM0 事件處理
<div id="clickItem"></div>
<script>
var clickDiv = document.getElementById("clickItem");
clickDiv.onclick = function(){
//事件處理程序中this指向發(fā)生事件的對象
alert(this.id+" clicked!");
}
</script>
- DOM2 事件處理
<div id="clickItem"></div>
<script>
var clickDiv = document.getElementById("clickItem");
function handler(){
alert(this.id+" clicked!");
}
function handler2(){
alert(this.id+" clicked again!");
}
//第一個參數(shù)：事件類型
//第二個參數(shù)：處理程序
//第三個參數(shù)：true，捕獲階段處理/false，冒泡階段處理
clickDiv.addEventListener('click',handler,false);
//可以添加多個處理程序，按照添加的順序執(zhí)行
clickDiv.addEventListener('click',handler2,false);
//dom2的事件處理程序只能這樣移除
clickDiv.removeEventListener('click',handler,false)
</script>
- IE事件處理
<div id="clickItem"></div>
<script>
var clickDiv = document.getElementById("clickItem");
function handler(){
alert(this.id+" clicked!");
}
function handler2(){
alert(this.id+" clicked again!");
}
//第一個參數(shù)：事件類型，需要加上"on"前綴
//第二個參數(shù)：處理程序
clickDiv.attachEvent('onclick',handler);
//可以添加多個處理程序，與DOM不同，IE按照添加順序的反序執(zhí)行，這里先輸出again
clickDiv.attachEvent('onclick',handler2);
//IE事件處理程序移除
clickDiv.detachEvent('onclick',handler)
</script>
3.事件對象
1 事件對象：在處理程序（handler）中傳入，生命周期為處理期間
event.currentTarget //處理事件的目標
event.target //事件的目標DOM
event.type //事件類型
event.eventPhase //事件階段
event.preventDefault() //取消事件的默認行為
event.stopImmediatePropagation() //立即取消任何捕獲或者冒泡行為
event.stopPropagation() //取消冒泡，不再傳播事件
2 .IE 事件對象：
event.srcElement //事件的目標IE
event.cancelBubble() //取消冒泡IE
4.通用的事件監(jiān)聽對象
var EventUtil = {
//添加監(jiān)聽
addHandler:function(ele,handler,type){
if(ele.addEventListener){
ele.addEventListener(type,handler,false);
} else if(ele.attachEvent){
ele.attachEvent("on"+type,handler);
} else{
ele["on"+type] = handler;
}
},
//移除監(jiān)聽
removeHandler:function(ele,handler,type){
if(ele.removeEventListener){
ele.removeEventListener(type,handler,false);
}else if(ele.detachEvent){
ele.detachEvent("on"+type,handler);
}else{
ele["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;
}
}
}
