__ 一郁稍、事件冒泡和事件捕獲__
- 事件冒泡
事件冒泡就是從HTML中具體的一個元素，沿著DOM樹胜宇，向父級冒泡耀怜，直到document。
demo驗證
<body>
<div class="one">one
<div class="two">two
<div class="three">three</div>
</div>
</div>
<script type="text/javascript">
var one=document.getElementsByClassName("one")[0];
var two=document.getElementsByClassName("two")[0];
var three=document.getElementsByClassName("three")[0];
var html=document.getElementsByTagName("html")[0];
var test=false;
one.addEventListener('click',function(){
console.log("one");
},test);
two.addEventListener('click',function(){
console.log("two");
},test);
three.addEventListener('click',function(){
console.log("three");
},test);
document.body.addEventListener('click',function(){
console.log("body");
},test);
html.addEventListener('click',function(){
console.log("html");
},test);
document.addEventListener('click',function(){
console.log("document");
},test);
</script>
</body>
點擊three桐愉，控制臺結果：
three
two
one
body
html
document
IE5.5及更早版本事件冒泡會跳過html元素财破，從body直接到document。
- 事件捕獲
事件捕獲是與事件冒泡相反的過程从诲，沿著DOM樹左痢，事件最先觸發(fā)最頂級的元素，依次向下到最底層的元素系洛。
把代碼中的test=true俊性，再次點擊three，控制臺結果：
document
html
body
one
two
three
支持的瀏覽器：IE9描扯，Safari定页，Chrome，OPera绽诚，FireFox
由于老版本瀏覽器不支持典徊，因此很少使用事件捕獲，書中也建議我們使用事件冒泡恩够。
__ 二卒落、事件處理程序 __
事件處理程序有三種
1、是在HTML中嵌入事件處理程序
2蜂桶、DOM0級事件處理程序
3儡毕、DOM2級事件處理程序
添加事件：addEventListener(type,function,Boolean)
移除事件：removeEventListener(type,function,Boolean)
type：事件類型，function：事件執(zhí)行的函數扑媚，Boolean：true事件捕獲妥曲，false事件冒泡。
支持的瀏覽器：IE9钦购、FireFox，Safari褂萧，Chrome押桃，OPera
4、IE事件處理程序
添加事件：attachEvent(type,function)
移除事件：detachEvent(type,function)
IE8-只支持事件冒泡导犹，通過此方法的事件都會添加到冒泡階段唱凯。
三羡忘、事件對象
在觸發(fā)DOM上的某個事件時，會產生一個事件對象event磕昼。
- DOM事件對象：
兼容的DOM會將一個event對象傳入到事件處理程序中卷雕，無論指定事件處理成程序時使用什么方法（Dom0級、DOM2級）票从，都會傳入event對象漫雕。
| 屬性/ 方法 | 類型 | 讀/寫 | 說明 |
|---|---|---|---|
| bubbles | Boolean | 只讀 | 表明事件是否冒泡 |
| cancelable | Boolean | 只讀 | 表明是否可以取消事件的默認行為 |
| currentTarget | Element | 只讀 | 其事件處理程序當前正在處理事件的那個元素 |
| defaultPrevented | Boolean | 只讀 | 為true表明已經調用了preventDefault()方法 |
| detail | Integer | 只讀 | 與事件相關的細節(jié)信息 |
| eventPhase | Integer | 只讀 | 調用事件處理程序的階段，1捕獲階段峰鄙，2處于目標階段浸间，3冒泡階段 |
| preventDefault() | Function | 只讀 | 取消事件的默認行為，如果cancelable為true吟榴，則可以使用 |
| stopImmediatePropagation() | Function | 只讀 | 取消事件的進一步捕獲或冒泡魁蒜，同時阻止任何事件處理程序被調用 |
| stopPropagation() | Function | 只讀 | 取消事件的進一步捕獲或冒泡，如果bubbels為true吩翻，則可以使用這個方法 |
| target | Element | 只讀 | 事件的目標 |
| trusted | Blooean | 只讀 | 為true表示事件是瀏覽器生成的兜看，為false表示事件是由開發(fā)人員通過js創(chuàng)建的 |
| type | String | 只讀 | 被觸發(fā)的事件的類型 |
| view | AbstractView | 只讀 | 與事件關聯(lián)的抽象視圖。等同于發(fā)生事件的window對象 |
- IE中的事件對象
在使用DOM0級方法添加事件處理程序時狭瞎，event作為window對象的一個屬性event=window.event
如果事件處理程序是使用attachEvent()添加的细移，那么就會有一個event作為參數傳入事件處理程序函數中。
| 屬性/ 方法 | 類型 | 讀/寫 | 說明 |
|---|---|---|---|
| cancelBubble | Blooean | 讀/寫 | 默認值為false脚作，但將其設置為true就可以取消事件冒泡葫哗，與DOM中stopPropagation()的方法作用相同 |
| returnvalue | Blooean | 讀/寫 | 默認值為true，但將其設置為fasle球涛，就可以取消事件的默認行為劣针，與DOM中的preventDefault()方法的作用相同 |
| srcElement | Element | 只讀 | 事件的目標，與DOM中的target屬性相同 |
| type | String | 只讀 | 被觸發(fā)的事件類型 |
四亿扁、跨瀏覽器的事件處理程序以及事件對象
/**
跨瀏覽器事件處理程序
*/
var EventUtil={
//事件處理程序
addHandler:function(element,typo,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);//Dom2級事件監(jiān)聽
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);//IE事件處理程序
}else{
element["on"+type]=handler;//DOM0級事件處理程序
}
},
removeHandler:function(element,typo,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;
}
},
}
由于IE9以前不支持事件捕獲捺典，因此stopPropagation()只能用來阻止事件冒泡。
簡要的筆記从祝，先記到這里襟己，后面再繼續(xù)深入學習各種事件類型，加油ｋ鼓啊Ｇ嬖 ！
