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