-
事件冒泡：事件在文檔樹上向上傳播，如有以下結(jié)構(gòu)
<html> <body> <div> <input type="button"/> </div> </body> </html>
當(dāng)用戶點(diǎn)擊按鈕時(shí)，首先在按鈕上觸發(fā)點(diǎn)擊事件，接著在包著按鈕的div上觸發(fā)點(diǎn)擊事件，然后是body......
- 事件捕獲：在文檔樹上向下傳播，從外層到里層，與時(shí)間冒泡傳播順序正好相反。在容器上注冊的時(shí)間處理程序有機(jī)會(huì)在事件傳播到真實(shí)的目標(biāo)之間捕獲它。IE8及以下版本不支持事件捕獲。
一 DOM事件
1 HTML事件
缺點(diǎn)：耦合程度高，更改js代碼時(shí)常常需要修改html里的代碼
如：
<input type="button"/ onclick="showMes()">
<script>
function showMes()
{
alert("hello world")
}
</script>
2 DOM0級事件
如：
var btn=document.getElementById（"btn"）;
btn.onclick=function(){
...
}
缺點(diǎn)：每個(gè)事件目標(biāo)對于每個(gè)特定類型都只能有一種事件處理程序
3 DOM2級事件
addEventListener()
removeEventListener()
上面兩個(gè)方法都是傳入三個(gè)參數(shù)
- 事件類型 如click mouseover 注意不用加on
- 事件函數(shù)
- 布爾值 一般為false true 表示函數(shù)將注冊為捕獲事件處理函數(shù)，并在事件的不同調(diào)度階段調(diào)用
支持DOM事件的瀏覽器有：Chrome，火狐等
<code>
btn.addEventListener("click",showMes,false)
</code>
二 IE事件
提供如下兩個(gè)方法
1 attachEvent() 添加事件
2 detachEvent() 刪除時(shí)間
且兩個(gè)方法傳入相同的參數(shù)（事件處理程序的名稱，事件處理程序的函數(shù)）
支持的瀏覽器：IE8及以下
三 解決瀏覽器兼容問題
可以根據(jù)能力判斷來寫兼容瀏覽器的事件處理程序的代碼
// 封裝添加事件監(jiān)聽程序
function addEvent(ele,type,hander){
// 支持DOM2級
if(ele.addEventListener){
ele.addEventListener(type,hander,false);
}
//不支持DOM2級，支持IE事件
else if(ele.attachEvent)
{
ele.attachEvent('on'+type,hander);
}
//既不支持DOM2級也不支持IE，只能用DOM0級
else ele['on'+type]=hander;
}
<b>
注意：在javascript中，對象的寫法等價(jià)于中括號的寫法
ele.onclick等價(jià)于ele['onclick']
</b>
四 事件對象
- DOM中的事件對象
- type 獲取事件類型
- target 獲取事件目標(biāo)
- stopPropagation() 阻止事件冒泡
- preventDefault() 阻止事件的默認(rèn)行為
- IE中的事件對象
- type 獲取事件類型
- scrElement 獲取事件目標(biāo)
- cancelBubble 用于阻止事件冒泡（是個(gè)屬性，設(shè)為true表示阻止冒泡，設(shè)為false表示不阻止冒泡）
- returnValue 該屬性用于阻止默認(rèn)行為，設(shè)為false表示阻止
本文的撰寫參考自javascript權(quán)威指南第六版以及慕課網(wǎng)上相關(guān)教程，錯(cuò)漏之處，歡迎指正。
