1榆纽、事件流
1.1事件冒泡
IE的事件流叫做事件冒泡局齿,即事件開始時(shí)由嘴具體的元素接收,然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)陆赋。
1.2事件捕獲
不太具體的節(jié)點(diǎn)應(yīng)該最早接收到事件
1.3DOM事件流
事件流爆款三個(gè)階段:事件捕獲階段扛门、處于目標(biāo)階段和事件冒泡階段鸠信。
2、事件處理程序
2.1HTML事件處理程序
<input type="button" value="cliclk me" onclick="alert('Clicked')" />
2.2DOM0級(jí)事件處理程序
將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩?/p>
2.3DOM2級(jí)事件處理程序
定義了兩個(gè)方法
addEventListener() 和 removeEvenListener() 所有節(jié)點(diǎn)都包含這兩個(gè)方法:接收3個(gè)參數(shù):要處理的事件名论寨、作為事件處理程序的函數(shù)和一個(gè)布爾值星立,最后這個(gè)布爾值true爽茴,表示在捕獲階段調(diào)用事件處理程序;如果false绰垂,表示在冒泡階段調(diào)用事件處理程序
2.4IE事件處理程序
attachEvent() detachEvet()
2.5跨瀏覽器的時(shí)間處理程序
3室奏、事件對(duì)象
在觸發(fā)DOM上的某個(gè)事件時(shí),會(huì)產(chǎn)生一個(gè)對(duì)象event,這個(gè)對(duì)象中包含所有與事件有關(guān)的信息劲装。包括事件的元素胧沫、事件的類型以及其他與特定事件相關(guān)的信息。
3.1DOM中的事件對(duì)象
var but = document.getLivePusherById("mybtn");
btn.onclick = function(event){
alert(event.type); //"click"
},
btn.addEventListener("click", function(event){
alert(event.type); //click
}, false)
3.2IE中的事件對(duì)象
要訪問IE中的event對(duì)象有幾種不同的方式酱畅,取決于指定事件處理程序方法琳袄。
3.3跨瀏覽器的事件對(duì)象
getEvent()江场、getTarget()纺酸、preventDefault()、stopPropagation()
4址否、事件類型
UI事件餐蔬,當(dāng)用戶于頁(yè)面上的元素交互式觸發(fā)
焦點(diǎn)事件,當(dāng)元素活的或失去焦點(diǎn)時(shí)觸發(fā)
鼠標(biāo)事件佑附,當(dāng)用戶通過鼠標(biāo)在頁(yè)面上執(zhí)行操作時(shí)觸發(fā)
滾輪事件樊诺,當(dāng)使用鼠標(biāo)滾輪時(shí)觸發(fā)
鍵盤事件,當(dāng)用戶通過剪片在頁(yè)面上執(zhí)行操作時(shí)觸發(fā)
合成事件音同,當(dāng)IME輸入字符時(shí)觸發(fā)
變動(dòng)事件词爬,當(dāng)?shù)讓覦OM結(jié)構(gòu)發(fā)生變化時(shí)觸發(fā)
變動(dòng)名稱事件,當(dāng)元素或?qū)傩悦儎?dòng)時(shí)觸發(fā)
4.1UI事件
load事件权均,當(dāng)頁(yè)面完全加載后顿膨,就會(huì)觸發(fā)window上面load事件
unload事件,這個(gè)事件在文檔完全卸載后出阿發(fā)
resize事件叽赊,當(dāng)瀏覽器窗口被調(diào)整到一個(gè)新的高度或?qū)挾葧r(shí)恋沃,就會(huì)觸發(fā)resize事件
scroll事件
4.2焦點(diǎn)事件
焦點(diǎn)事件會(huì)在頁(yè)面獲得或失去焦點(diǎn)時(shí)觸發(fā)
方法 document.hasFocus() document.activeElement屬性
blur:在元素失去焦點(diǎn)時(shí)觸發(fā)
DOMFocusIn:在元素獲得焦點(diǎn)時(shí)觸發(fā)
DOMFocusOut:在元素失去焦點(diǎn)時(shí)觸發(fā)
focus:在元素活的焦點(diǎn)時(shí)觸發(fā)
focusin:在元素活的焦點(diǎn)時(shí)觸發(fā)
focusout:在元素失去焦點(diǎn)時(shí)觸發(fā)
4.3鼠標(biāo)與滾輪事件
click:在用戶單擊主鼠標(biāo)按鈕時(shí)觸發(fā)或者按下回車鍵時(shí)觸發(fā)
dblclicl:在用戶雙擊主鼠標(biāo)時(shí)觸發(fā)
mousedown:在鼠標(biāo)按下任意鼠標(biāo)觸發(fā)
mouseenter:在鼠標(biāo)光標(biāo)從元素外部首次移動(dòng)到元素范圍之內(nèi)時(shí)觸發(fā)
mouseleave:在位于元素上方的鼠標(biāo)光標(biāo)移動(dòng)到元素范圍之外時(shí)觸發(fā)
mousemove:當(dāng)鼠標(biāo)指示在元素內(nèi)部移動(dòng)時(shí)重復(fù)地觸發(fā)
mouseout:在鼠標(biāo)指針位于一個(gè)元素上方,然后用戶將其移入另一個(gè)元素時(shí)觸發(fā)
mouserover:在鼠標(biāo)指針位于一個(gè)元素外部必指,然后用戶將其首次移入另一個(gè)元素邊界之內(nèi)時(shí)觸發(fā)囊咏。
mouseup:在用戶釋放鼠標(biāo)按鈕時(shí)觸發(fā)
4.4鍵盤與文本事件
keydown:當(dāng)用戶按下鍵盤上的任意鍵時(shí)觸發(fā)
keypress:當(dāng)用戶按下鍵盤上字符鍵時(shí)觸發(fā)
keyup:當(dāng)用戶釋放鍵盤上的鍵時(shí)觸發(fā)
4.5復(fù)合事件
4.6變動(dòng)事件
4.7HTML5事件
contextmenu事件 beforeunload事件 DOMContentLoaded事件 readystatechange事件 pageshow事件 pagehide事件 hashchange事件