事件處理程序
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
//這里省略了其他代碼
btn.removeEventListener("click", function(){ //沒有用! alert(this.id);
}, false);
如果是true，表示在捕獲階段調(diào)用事件處理程序
如果是false，表示在冒泡階段調(diào)用事件處理程序
以上兩個function是不同的函數(shù)，匿名函數(shù)出了作用域就無法復(fù)用
事件對象
bubbles:表明事件是否冒泡
cancelable:表明是否可以取消事件的默認(rèn)行為
currentTarget:其事件處理程序當(dāng)前正在處理事件的那個元素
defaultPrevented:為true表示已經(jīng)調(diào)用了preventDefault()
detail:與事件相關(guān)的細(xì)節(jié)信息
eventPhase:調(diào)用事件處理程序的階段:1表示捕獲階段,2表
示“處于目標(biāo)”,3表示冒泡階段
prevenDefault():取消事件的默認(rèn)行為。如果cancelable是
true,則可以使用這個方法
stopImmediatePropagation():取消事件的進(jìn)一步捕獲或冒泡,同時阻止任何
事件處理程序被調(diào)用
stopPropagation():取消事件的進(jìn)一步捕獲或冒泡。如果bubbles
為true,則可以使用這個方法
target:事件的目標(biāo)
trusted:為true表示事件是瀏覽器生成的。為false表 示事件是由開發(fā)人員通過JavaScript創(chuàng)建的
view:與事件關(guān)聯(lián)的抽象視圖。等同于發(fā)生事件的 window對象
事件類型
UI事件、焦點事件、鼠標(biāo)事件、滾輪事件、文本事件、鍵盤事件、合成事件、變動(mutation)事件、變動名稱事件
UI事件
load 加載完時觸發(fā)
unload 卸載完后觸發(fā)。利用這個事件最多的情況是清除引用,以避免內(nèi)存泄漏。
abort 在用戶停止下載過程時,如果嵌入的內(nèi)容沒有加載完,則在<object>元素上面觸發(fā)。
error
select 選擇文本框中一或多個字符時出發(fā)
resize 窗口大小變化時觸發(fā)
scroll 滾動帶滾動條的元素觸發(fā)
焦點事件
blur 失去焦點觸發(fā)
focus 獲得焦點時觸發(fā)
focusin 元素獲得焦點時觸發(fā)
focusout 在元素失去焦點時觸發(fā)
鼠標(biāo)與滾輪事件
click 單擊
dblclick 雙擊
mousedown 在用戶按下了任意鼠標(biāo)按鈕時觸發(fā)
mouseenter 首次移入
mouseleave
mousemove 重復(fù)觸發(fā)
mouseout
mouseover
mouseup 在用戶釋放鼠標(biāo)按鈕時觸發(fā)
clientX，pageX，screenX：視圖邊距，頁面邊距，屏幕邊距
DOM 的 button 屬性可能有如下 3 個值:0 表示主鼠標(biāo)按鈕（左）,1 表示中間的鼠標(biāo)按鈕(鼠標(biāo)滾輪按鈕),2 表示次鼠標(biāo)按鈕（右）
鍵盤與文本事件
keydown:當(dāng)用戶按下鍵盤上的任意鍵時觸發(fā),而且如果按住不放的話,會重復(fù)觸發(fā)此事件。
keyup:當(dāng)用戶釋放鍵盤上的鍵時觸發(fā)。
keypress:當(dāng)用戶按下鍵盤上的字符鍵時觸發(fā),而且如果按住不放的話,會重復(fù)觸發(fā)此事件。按下 Esc 鍵也會觸發(fā)這個事件。
textInput 事件：當(dāng)用戶在可編輯區(qū)域中輸入字符時,就會觸發(fā)這個事件。
keypress和textInput區(qū)別
1 任何可以獲得焦點的元素都可以觸發(fā) keypress 事件,但只有可編輯區(qū)域才能觸發(fā) textInput 事件
2 textInput 事件只會在用戶按下能夠輸入實際字符的鍵時才會被觸發(fā),而 keypress 事件則在按下那些能夠影響文本顯示的鍵時也會觸發(fā)(例如退格鍵)
變動事件
DOMSubtreeModified
DOMNodeInserted
DOMNodeInsertIntoDocument
DOMNodeRemoveFromDocument
DOMAttrModified
DOMCharacterDataModified
HTML5事件
contextmenu
beforeunload
DOMContentLoaded： DOMContentLoaded 事件則在形成完整的 DOM 樹之后就會觸發(fā), 不理會圖像、JavaScript 文件、CSS 文件或其他資源是否已經(jīng)下載完畢。
readystatechange：五種值uninitialized、loading、loaded、interactive、complete
pageshow 和 pagehide
hashchange ：必須要把 hashchange 事件處理程序添加給 window 對象,然后 URL 參數(shù)列表只要變化就會調(diào)用它。此時的 event 對象應(yīng)該額外包含兩個屬性:oldURL 和 newURL。這兩個屬性分別保存著參數(shù)列表變化前后的完整 URL。
EventUtil.addHandler(window, "hashchange", function(event){ alert("Old URL: " + event.oldURL + "\nNew URL: " + event.newURL);
});
設(shè)備事件
orientationchange:包含3個值:0 表示肖像模式,90 表示向左旋轉(zhuǎn)的橫向模式(“主屏幕”按鈕在右側(cè)),-90 表示向右旋轉(zhuǎn)的橫向模式(“主屏幕”按鈕在左側(cè))。相關(guān)文檔中還提到一個值,即 180 表示iPhone頭朝下;但這種模式至今 尚未得到支持。
MozOrientation:當(dāng)設(shè)備的加速計檢測到設(shè)備方向改變時,就會觸發(fā)這個事件
deviceorientation :在加速計檢測到設(shè)備方向變化時在 window 對象上觸發(fā)
觸摸與手勢事件
touchstart
touchmove
touchcancel
