DOM事件主要內(nèi)容

• 事件流
• 事件注冊(cè)
• 事件對(duì)象
• 事件分類
• 事件代理

什么是DOM事件?

• 事件是某個(gè)行為或者觸發(fā)恋谭，比如點(diǎn)擊于购、鼠標(biāo)移動(dòng)
• 當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)
• 當(dāng)網(wǎng)頁已加載時(shí)
• 當(dāng)圖像已加載時(shí)
• 當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)
• 當(dāng)用戶觸發(fā)按鍵時(shí)...

事件流

事件流

• capture phase捕獲事件
  • 事件對(duì)象通過目標(biāo)的祖先從傳播窗口到目標(biāo)的父。這個(gè)階段也被稱為捕獲階段
• target phase
  • DOM2級(jí)事件規(guī)定事件流包括三個(gè)階段，事件捕獲階段油挥，處于目標(biāo)階段稻扬，事件冒泡階段想诅，首先發(fā)生的是事件捕獲薄声，為截取事件提供機(jī)會(huì)，然后是實(shí)際目標(biāo)接收事件破镰，最后是冒泡階段
• bubble phase 冒泡
  • IE的事件冒泡：事件開始時(shí)由最具體的元素接收餐曼，然后逐級(jí)向上傳播到較為不具體的元素

參考資料: 事件流

事件注冊(cè)與觸發(fā)

在講述事件注冊(cè)之前,講一下前面的事件處理程序

• HTML內(nèi)聯(lián)方式
  • 存在加載順序問題，如果事件處理程序在html代碼之后加載鲜漩，用戶可能在事件處理程序還未加載完成時(shí)就點(diǎn)擊按鈕之類的觸發(fā)事件源譬，存在時(shí)間差問題
  • 這樣書寫html代碼和JavaScript代碼緊密耦合，維護(hù)不方便

<input type="button" value="Click Here" onclick="alert('Clicked!');" />

• JavaScript指定事件處理程序
  • 把一個(gè)方法賦值給一個(gè)元素的事件處理程序?qū)傩浴?/li>
  • 可以刪除事件處理程序宇整，只需把元素的onclick屬性賦為null即可

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.onclick = function showMessage() {
        alert(this.id);
    };
</script>

事件注冊(cè)(DOM2事件處理程序)

• eventTarget.addEventListener(type,listener[,useCapture])
  • 事件類型
  • 事件處理方法
  • 布爾參數(shù)瓶佳，如果是true表示在捕獲階段調(diào)用事件處理程序，如果是false鳞青，則是在事件冒泡階段處理

var elem = document.getElementById("div1")
var clickHandler = function(){
  //to do
}
elem.addEventListener('click',clickHandler,false)

取消事件注冊(cè)

• eventTarget.removeEventListener(type,listener[,useCapture])
  • 事件類型
  • 事件處理方法
  • 布爾參數(shù)霸饲，如果是true表示在捕獲階段調(diào)用事件處理程序，如果是

elem.removeEventListener('click',clickHandler,false)
elem.onclick = null

事件觸發(fā)

• eventTarget.dispatchEvent(type)

elem.dispatch("click")

瀏覽器兼容性(IE6 7 8)

事件注冊(cè)與取消

IE并不支持addEventListener和removeEventListener方法臂拓，而是實(shí)現(xiàn)了兩個(gè)類似的方法

• attachEvent
• detachEvent
  這兩個(gè)方法都接收兩個(gè)相同的參數(shù)
  • 事件處理程序名稱
  • 事件處理程序方法

事件觸發(fā)

• fireEvent(e)

no capture沒有捕獲

兼容性

事件對(duì)象(共有的)

當(dāng)事件被觸發(fā)的時(shí)候,會(huì)調(diào)用事件處理函數(shù),在調(diào)用時(shí)間處理函數(shù)中,有一些信息,這些信息代表著事件的狀態(tài),這個(gè)就是事件對(duì)象

以click為例

• 屬性
  • type類型:例如點(diǎn)擊什么的...
  • target(srcElement IE低版本)目標(biāo)元素,點(diǎn)擊哪個(gè)就是那個(gè)
  • currentTarget:事件處理程序當(dāng)前處理元素
• 方法
  • stopPropagation()取消事件進(jìn)一步捕獲或冒泡
  • preventDefault()取消事件默認(rèn)行為

阻止事件傳播(冒泡)

• event.stopPropagation()W3C
• event.cancelBubble=trueIE

默認(rèn)行為

• event.preventDefault()W3C
• event.returnValue = false IE

事件分類

事件種類

MouseEvent

MouseEvent對(duì)象

• 屬性
  • clientX, clientY位置
  • screenX, screenY
  • ctrlKey,shiftKey,altKey,metaKey
  • button(0,1,2)鼠標(biāo)左鍵還是右鍵還是滾輪

MouseEvent事件順序

順序

WheelEvent滾輪事件

FocusEvent 元素獲得焦點(diǎn)和失去焦點(diǎn)

• 屬性
  • relatedTarget當(dāng)一個(gè)元素失去焦點(diǎn),另一個(gè)元素就會(huì)獲得焦點(diǎn)

InputEvent 輸入事件(W3C)

• onpropertychange(ie)

KeyboardEvent鍵盤事件

• 屬性
  • key按下什么鍵,值是字符串
  • code
  • ctrlKey,shiftKey,altKey,metaKey
  • repeat持續(xù)按一個(gè)鍵

Event

<image alt = "photo" src = "www.baidu.com" onerror = "this.src = 'www.wangyi.com'"/>

UIEvent

事件代理

參考我寫的另一片文章 從onClick談事件代理和了解事件傳播機(jī)制

總結(jié)一下不能冒泡的事件:

• mouseenter
• mouseleave
• blur
• focus
• focusin
• focusout
• load
• unload
• error
• select
• abort
• resize