1.**事件**，就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間。
2.**事件流**描述的是從頁面中接收事件的順序。IE的事件流是事件冒泡流，Netscape的事件流是事件捕獲流。
3.**事件冒泡**即事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的節(jié)點(diǎn)。**事件捕獲**則相反。由于老版本的瀏覽器不支持事件捕獲，因此很少有人使用事件捕獲。建議讀者放心地使用事件冒泡，在有特殊需要時再使用事件捕獲。事件捕獲和事件冒泡有一端的終點(diǎn)是window對象（雖然規(guī)范要求從document對象開始傳播），另一端的終點(diǎn)是觸發(fā)事件的最具體元素。
4.『DOM2級事件』規(guī)定的事件流流包括三個階段：事件捕獲階段、處于目標(biāo)階段、事件冒泡階段。***即使"DOM2級事件"規(guī)范明確要求捕獲階段不會涉及事件目標(biāo)，但現(xiàn)代瀏覽器都會在捕獲階段觸發(fā)事件對象上的事件。結(jié)果，就是有兩個機(jī)會在目標(biāo)對象上面操作事件***。
5.響應(yīng)某個事件的函數(shù)就叫做**事件處理程序**。
6.**HTML事件處理程序**有一些獨(dú)到之處。首先，這樣會創(chuàng)建一個封裝著元素屬性值的函數(shù)，這個函數(shù)中有一個局部變量event，也就是**事件對象**。通過event變量，可以直接訪問事件對象，你不用自己定義它，也不用從函數(shù)的參數(shù)列表中讀取。在這個函數(shù)內(nèi)部this值等于事件的目標(biāo)元素。
關(guān)于這個動態(tài)創(chuàng)建的函數(shù)，另一個有意思的地方是它擴(kuò)展作用域的方式。在這個函數(shù)內(nèi)部，可以像訪問局部變量一樣訪問document及該元素本身的成員。如果當(dāng)前元素是一個表單輸入元素，則作用域中還會包含訪問表單元素（父元素）的入口。
~~~
function(){
with(document){
with(this.form){
with(this){
//元素屬性值
}
}
}
}
~~~
事件處理程序中的代碼在執(zhí)行時，有權(quán)訪問全局作用域中的任何代碼。
7.**DOM0級事件處理程序**中的this引用當(dāng)前元素。以這種方式添加的事件處理程序會在事件冒泡階段被處理。將事件處理程序設(shè)置為null可以刪除通過DOM0級方法指定的事件處理程序。（此方法也可以刪除HTML指定的事件處理程序）
8.**DOM2級事件處理程序**定義了兩個方法用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()。所有DOM節(jié)點(diǎn)中都包含這兩個方法，并且他們都接受3個參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值。最后這個布爾值參數(shù)如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。
與DOM0級方法相同，DOM2級方法添加的事件處理程序也是在其依附的元素的作用域中運(yùn)行。使用DOM2級方法的主要好處是可以添加多個事件處理程序，事件處理程序會按照添加它們的順序觸發(fā)。
通過addEventListener()添加的事件處理程序只能使用removeEventListener()來移除，移除時傳入的參數(shù)與添加處理程序時使用的參數(shù)相同。這也意味著通過addEventListener()添加的匿名函數(shù)將無法移除。
<del>9.【IE】attachEvent\detachEvent中的this指向window、綁定的事件名要加'on'、只能添加到冒泡階段、同一元素同一事件綁定的多個事件處理程序觸發(fā)順序與DOM相反。</del>
10.event.preventDefault()阻止特定事件的默認(rèn)行為。event.stopPropagation()立即停止事件在DOM層次中的傳播。
11.DOM中的事件對象。兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中。無論指定事件處理程序時使用DOM0級或DOM2級都會傳入event對象。（***傳參名字可以自定義為e或其他***）
event對象的屬性：
target在事件流的目標(biāo)階段；currentTarget在事件流的捕獲，目標(biāo)及冒泡階段。只有當(dāng)事件流處在目標(biāo)階段的時候，兩個的指向才是一樣的， 而當(dāng)處于捕獲和冒泡階段的時候，target指向被單擊的對象而currentTarget指向當(dāng)前事件活動的對象(注冊該事件的對象)（一般為父級）。this指向永遠(yuǎn)和currentTarget指向一致（只考慮this的普通函數(shù)調(diào)用）。
<del>12.IE中的事件對象</del>
* DOM0級：event對象作為window對象的一個屬性存在。
* attachEvent()：可以通過window對象來訪問event對象（與DOM0級相同）也會作為參數(shù)傳遞。
* HTML事件處理程序：可以通過一個名叫event的變量來訪問event對象。
IE中用event.srcElement作為事件處理程序的作用域（而不是this）是比較保險的處理方式。
13.load事件：當(dāng)頁面完全加載后再window上面觸發(fā)，當(dāng)作有框架都加載完畢時在框架集上觸發(fā)，當(dāng)圖像加載完畢時在<img>元素上觸發(fā)，或者當(dāng)嵌入內(nèi)容加載完畢時在<object>元素上觸發(fā)。
圖片load事件應(yīng)用（最重要的是要在指定src屬性之前先指定事件。）
~~~
window.onload = function(){
var image = new Image();
image.onload = function(){
alert('Image loaded!');
}
image.src = 'smile.gif';
}
~~~
<script>和<link>標(biāo)簽也有onload事件，但只有設(shè)置了src屬性并將該元素添加到文檔后才會開始下載。
14.unload事件：這個事件在文檔被完全卸載后出發(fā)。只要用戶從一個頁面切換到另一個頁面，就會發(fā)生unload事件。利用這個事件最多的情況是清楚引用，以避免內(nèi)存泄漏。（chrome和opera不支持該事件）
15.resize事件：當(dāng)瀏覽器窗口被調(diào)整到一個新的高度或?qū)挾葧r觸發(fā)。瀏覽器窗口最小化或最大化時也會觸發(fā)這個事件。
16.scroll事件：當(dāng)文檔被滾動期間重復(fù)觸發(fā)。
以上三個事件均綁定在window對象上。
16.5 焦點(diǎn)事件會在頁面元素獲得或失去焦點(diǎn)時觸發(fā)。利用這些事件與docuemnt.hsaFocus()方法及document.activeElement屬性配合，可以知曉用戶在頁面上的行蹤。當(dāng)焦點(diǎn)從頁面的一個元素移動到另一個元素，會依次觸發(fā)下列事件：
（1）focusout在失去焦點(diǎn)的元素上觸發(fā)
（2）focusin在獲得焦點(diǎn)的元素上觸發(fā)
（3）blur在失去焦點(diǎn)的元素上觸發(fā)（不冒泡）
（4）focus在獲得焦點(diǎn)的元素上觸發(fā)（不冒泡）
即使focus和blur不冒泡，也可以在捕獲階段偵聽到它們。focusout與focusin在firefox中不被支持（2016.12.17）
17.頁面上的所有元素都支持鼠標(biāo)事件。
（1）click：在用戶單機(jī)主鼠標(biāo)按鈕或這按下回車鍵時觸發(fā)。
（2）dbclick：在用戶雙擊主鼠標(biāo)按鈕時觸發(fā)。
（3）mousedown：在用戶按下任意鼠標(biāo)按鈕時觸發(fā)。不能通過鍵盤觸發(fā)這個事件。
（4）mouseup：在用戶釋放鼠標(biāo)按鈕時觸發(fā)。不能通過鍵盤觸發(fā)這個事件。
（5）mouseover：在鼠標(biāo)指針位于一個元素外部，然后用戶將其首次移入另一個元素邊界之內(nèi)時觸發(fā)。不能通過鍵盤觸發(fā)這個事件。
（6）mouseout：在鼠標(biāo)指針位于一個元素上方，然后用戶將其移入另一個元素時觸發(fā)。又移入的另一個元素可能位于前一個元素的外部，也可能是這個元素的子元素。不能通過鍵盤觸發(fā)這個事件。
（7）mouseenter在鼠標(biāo)光標(biāo)從元素外部首次移動到元素范圍之內(nèi)時觸發(fā)。這個事件不冒泡，而且在光標(biāo)移動到后代元素上不會觸發(fā)。
（8）mouseleave在位于元素上方的鼠標(biāo)光標(biāo)移動到元素范圍之外時觸發(fā)。這個事件不冒泡，而且在光標(biāo)移動到后代元素上不會觸發(fā)。
mouseenter及 mouseleave在webkit核心的瀏覽器中的支持性存疑。
18.雙擊鼠標(biāo)產(chǎn)生的事件如下：
* mousedown
* mouseup
* click
* mousedown
* mouseup
* click
* dbclick
19.mousewheel事件
20.事件對象的**clientX**和**clientY**屬性表示事件發(fā)生時鼠標(biāo)指針在視口中的水平和垂直坐標(biāo)。
21.事件對象的**pageX**和**pageY**屬性表示事件發(fā)生時鼠標(biāo)光標(biāo)在頁面中的位置。
22.事件對象的**screenX**和**screenY**屬性表示事件發(fā)生時鼠標(biāo)光標(biāo)在整個屏幕中的位置。
23.雖然鼠標(biāo)事件主要是使用鼠標(biāo)來觸發(fā)的，但在按下鼠標(biāo)時鍵盤上的某些鍵的狀態(tài)也可以影響到要采取的操作。事件對象的shiftKey、ctrlKey、altKey、metaKey（win/cmd）屬性在返回true時，表示事件發(fā)生時鍵盤相應(yīng)的鍵被按下了。
23.5 DOM通過event對象的relatedTarget屬性提供了mouseover和mouseout事件的相關(guān)元素的信息。（例如，當(dāng)mouseover事件觸發(fā)時，事件的主目標(biāo)是獲得光標(biāo)的元素，而相關(guān)元素就是那個失去光標(biāo)的元素。）
24.只有在主鼠標(biāo)按鈕被單擊（或鍵盤回車鍵被按下）時才回觸發(fā)click事件，因此檢測按鈕的信息并不是必要的。但對于mousedonw和mouseup事件來說，則在其event對象存在一個button屬性，表示按下或釋放按鈕。DOM的button屬性可能有如下3個值：0表示主鼠標(biāo)按鈕，1表示中間的鼠標(biāo)按鈕（鼠標(biāo)滾輪按鈕），2表示次鼠標(biāo)按鈕。
24.5 DOM2級事件規(guī)范在event對象中還提供了detail屬性，用于給出有關(guān)事件的更多信息。對于鼠標(biāo)事件來說，detail中包含了一個數(shù)值，表示在給定位置發(fā)生了多少次單擊。在同一個元素上相繼發(fā)生一次mousedown和一次mouseup事件算作一次單機(jī)。detail屬性從1開始計數(shù)，每次單擊發(fā)生后都會遞增。如果鼠標(biāo)在mousedown和mouseup之間移動了位置，則detail會被重置為0。
25. mousewheel事件可以在任何元素上觸發(fā)（firefox不支持），最終冒泡到window。與mousewheel事件對應(yīng)的event對象除包含鼠標(biāo)事件的所有標(biāo)準(zhǔn)信息外，還包含一個特殊的wheelDelta屬性。當(dāng)用戶向前滾動鼠標(biāo)滾輪時，wheelDelta是120的倍數(shù)；當(dāng)用戶向后滾動鼠標(biāo)滾輪時，wheelDelta是-120的倍數(shù)。
firefox支持一個名為DOMMouseScroll的類似事件，也是在鼠標(biāo)滾輪滾動時觸發(fā)。有關(guān)鼠標(biāo)滾輪的信息則保存在detail屬性中。當(dāng)用戶向前滾動鼠標(biāo)滾輪時，detail是-3的倍數(shù)；當(dāng)用戶向后滾動鼠標(biāo)滾輪時，detail是3的倍數(shù)。
25.5 在面向iOS系統(tǒng)中的Safari開發(fā)時，要記住以下幾點(diǎn)。
（1）不支持dblclick事件。雙擊瀏覽器窗口會放大頁面，而且沒有辦法改變該行為。
（2）輕擊可點(diǎn)擊元素會觸發(fā)mousemove事件。如果此操作會導(dǎo)致內(nèi)容變化，將不再有其他事件發(fā)生；如果屏幕沒有因此變化，那么會依次發(fā)生mousedown、mouseup、click事件。輕擊不可單擊的元素不會觸發(fā)任何事件（touchmove不服）?？蓡螕舻脑厥侵改切﹩螕艨僧a(chǎn)生默認(rèn)操作的元素（如鏈接），或者那些已經(jīng)被指定了onclick事件處理程序的元素。
（3）mousemove事件也會觸發(fā)mouseover和mouseover事件。
（4）兩個手指放在屏幕上切頁面隨手指移動而滾動時會觸發(fā)mousewheel和scroll事件。
以上信息時效性存疑。
25.6 為了保證網(wǎng)頁的無障礙性，不建議使用click之外的其他鼠標(biāo)事件來展示功能或引發(fā)代碼執(zhí)行。
26.鍵盤事件（與鼠標(biāo)事件一樣，都支持相同的修改鍵）
* keydown：當(dāng)用戶按下鍵盤上的任意鍵時觸發(fā)，而且如果按住不放的話會重復(fù)觸發(fā)此事件。
* keypress：當(dāng)用戶按下鍵盤上的字符鍵（注意是字符鍵）時觸發(fā)，而且如果按住不放的話會重復(fù)觸發(fā)此事件。按下esc鍵也會觸發(fā)這個事件。
* keyup：當(dāng)用戶釋放鍵盤上的鍵時觸發(fā)。
雖然所有元素都支持以上3個事件，但只有在用戶通過文本框輸入文本時才最常用到。在用戶按了一下鍵盤上的字符鍵時，首先會觸發(fā)keydown，然后緊跟著是keypress事件，最后會觸發(fā)keyup事件。其中，keydown和keypress都是在文本框發(fā)生變化之前被觸發(fā)的；而keyup事件則是在文本框已經(jīng)發(fā)生變化之后被觸發(fā)的。如果用戶俺下了一個字符鍵不放，就會重復(fù)觸發(fā)keydown和keypress事件，直到用戶松開按鍵為止。
27.發(fā)生keydown和keyup事件時，event對象的keyCode屬性中會包含一個代碼，與鍵盤上一個特定的鍵位對應(yīng)。
27.5 DOM3級事件規(guī)范中引入了一個新事件，名叫textInput。這個用于替代keypress的textInput事件的行為稍有不同。區(qū)別之一就是任何可以獲得焦點(diǎn)的元素都可以觸發(fā)keypress事件，但只有可編輯區(qū)域才能觸發(fā)textInput事件。區(qū)別之二是textInput事件只會在用戶按下能夠輸入實(shí)際字符的鍵時才回觸發(fā)，而keypress事件則在按下那些能夠影響文本顯示的鍵時也會觸發(fā)（例如退格鍵）?！緁irefox不支持此事件】
28.變動事件
DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved響應(yīng)文檔樹修改、插入、移除等情況。
29.通常使用contextmenu事件來顯示自定義的上下文菜單，而使用onclick事件來隱藏該菜單。
30.beforeunload事件會在瀏覽器卸載頁面之前觸發(fā)，可以通過它來取消卸載并繼續(xù)使用原有頁面。為了顯示讓用戶選擇的對話框，必須將event.returnValue的值設(shè)置為要顯示給用戶的字符串（對IE及FF而言），同時作為函數(shù)的值返回（對safari和chrome而言）。【現(xiàn)代瀏覽器目前不支持返回自定義的字符串，只能使用系統(tǒng)默認(rèn)提示，F(xiàn)F目前疑似不支持這個方法】
EventUtil.addHandler(window,"beforeunload",function(event){
event = EventUtil.getEvent(event);
var message = '你確定要關(guān)閉頁面嗎？'
event.returnValue = message;
return message;
});
31.DOMContentLoaded事件在形成完整的DOM樹之后就會觸發(fā)。對于不支持這個事件的瀏覽器，建議在頁面加載期間設(shè)置一個時間為0毫秒的超時調(diào)用。
32.haschange事件在URL的參數(shù)列表（即URL中"#"號后面的所有字符串）
33.事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類的所有事件。利用事件委托，只需要在DOM樹中盡量最高的層次上添加一個事件處理程序。最適合采用事件委托的事件包括click、mousedown、mouseup、keydown、keyup和keypress。雖然mouseover和mouseout事件也冒泡，但要適當(dāng)處理它們并不容易，而且經(jīng)常需要計算元素的位置。事件委托的實(shí)際應(yīng)用中要注意對event.target對象的使用。
34.從文檔中溢出帶有事件處理程序的元素時或卸載頁面的時候沒有手動溢出事件處理程序會導(dǎo)致性能問題。（在事件處理程序中移除觸發(fā)事件的那個元素也可以阻止事件冒泡。目標(biāo)元素在文檔中是事件冒泡的前提。）
- 第一章 JavaScript簡介
- 第二章 在HTML中使用JavaScript
- 第三章 基本概念
- 第四章 變量、作用域和內(nèi)存問題
- 第五章 引用類型
- 第六章 面向?qū)ο蟮某绦蛟O(shè)計
- 第七章 函數(shù)表達(dá)式
- 第八章 BOM
- 第九章 客戶端檢測
- 第十章 DOM
- 第十一章 DOM擴(kuò)展
- 第十二章 DOM2和DOM3
- 第十三章 事件
- 第十四章 表單腳本
- 第十六章 HTML5腳本程序
- 第十七章 錯誤處理與調(diào)試
- 第二十章 JSON
- 第二十一章 AJAX和Comet
- 第二十二章 高級技巧
- 第二十三章 離線應(yīng)用與客戶端存儲
- 第二十四章 最佳實(shí)踐
- 第二十五章 新興的API