高級程序設計(第3版)第十三章事件/筆記

事件

事件流

• 事件流描述的是從頁面中接收事件的順序。
• 事件冒泡
• 事件捕獲

 

事件處理程序

• xx.onclick = function () {}
• xx.onclick = null
• addEventListener()
• removeEventListener()

• 參一：要處理的事件名
• 參二：做爲事件處理程序的函數
• 參三：一個布爾值。

• true ，表示在捕獲階段調用事件處理程序；
• false ，表示在冒泡階段調用事件處理程序。

 

事件對象

在觸發 DOM 上的某個事件時，會產生一個事件對象 event

//在須要經過一個函數處理多個事件時，可使用 type 屬性。 var btn = document.getElementById("myBtn"); var handler = function(event){  switch(event.type){  case "click":  alert("Clicked");  break;  case "mouseover":  event.target.style.backgroundColor = "red";  break;  case "mouseout":  event.target.style.backgroundColor = "";  break;  } }; btn.onclick = handler; btn.onmouseover = handler; btn.onmouseout = handler;

事件類型

UI事件

• load事件

• 當頁面徹底加載後（包括全部圖像、JavaScript 文件、CSS 文件等外部資源），就會觸發

EventUtil.addHandler(window, "load", function(){  var image = document.createElement("img");  EventUtil.addHandler(image, "load", function(event){  event = EventUtil.getEvent(event);  alert(EventUtil.getTarget(event).src);  });  document.body.appendChild(image);  image.src = "smile.gif"; }); /新圖像元素只要設置了 src 屬性就會開始下載。

• unload 事件

• 只要用戶從一個頁面切換到另外一個頁面，就會發生

• resize 事件

• 當瀏覽器窗口被調整到一個新的高度或寬度時，就會觸發

• scroll事件

 

焦點事件

• blur ：在元素失去焦點時觸發。這個事件不會冒泡
• DOMFocusIn ：在元素得到焦點時觸發。這個事件與 HTML 事件 focus 等價，但它冒泡。
• DOMFocusOut ：在元素失去焦點時觸發。這個事件是 HTML 事件 blur 的通用版本。
• focus ：在元素得到焦點時觸發。這個事件不會冒泡
• focusin ：在元素得到焦點時觸發。這個事件與 HTML 事件 focus 等價，但它冒泡。
• focusout ：在元素失去焦點時觸發。

 

鼠標與滾輪事件

• click ：單擊主鼠標按鈕或者按下回車鍵時觸發。
• dblclick ：雙擊鼠標按鈕
• mousedown
• mouseenter
• mouseleave
• mousemove
• mouseout
• mouseover
• mouseup

 

• clientX 和clientY
• pageX 和 pageY
• screenX 和 screenY

 

鍵盤與文本事件

• keydown
• keypress
• keyup

 

 

變更事件

 DOMSubtreeModified ：在 DOM 結構中發生任何變化時觸發。這個事件在其餘任何事件觸發後都會觸發。

 DOMNodeInserted ：在一個節點做爲子節點被插入到另外一個節點中時觸發。

 DOMNodeRemoved ：在節點從其父節點中被移除時觸發。

 DOMNodeInsertedIntoDocument ：在一個節點被直接插入文檔或經過子樹間接插入文檔以後觸發。

　　　　　　　　　　　　　　　　　　這個事件在 DOMNodeInserted 以後觸發。

 DOMNodeRemovedFromDocument ：在一個節點被直接從文檔中移除或經過子樹間接從文檔中移除以前觸發。

　　　　　　　　　　　　　　　　　　這個事件在 DOMNodeRemoved 以後觸發。

 DOMAttrModified ：在特性被修改以後觸發。

 DOMCharacterDataModified ：在文本節點的值發生變化時觸發。

 

HTML5事件

• contextmenu 事件
• beforeunload 事件
• DOMContentLoaded 事件
• readystatechange 事件

• loading（正在加載）：對象正在加載數據。
• loaded（加載完畢）：對象加載數據完成。
• interactive（交互）：能夠操做對象了，但尚未徹底加載。
• complete（完成）：對象已經加載完畢。 這

• pageshow 和 pagehide 事件

• pageshow在頁面顯示時觸發
• 在從新加載的頁面中，pageshow 會在 load 事件觸發後觸發
• 而對於 bfcache中的頁面，pageshow 會在頁面狀態徹底恢復的那一刻觸發。
• pagehide 事件會在瀏覽器卸載頁面的時候觸發，並且是在 unload 事件以前觸發

• hashchange 事件

• 便在 URL的參數列表（及 URL中「#」號後面的全部字符串） 發生變化時通知開發人員。
• 之因此新增這個事件,是由於在 Ajax應用中，開發人員常常要利用URL參數列表來保存狀態或導航信息。

EventUtil.addHandler(window, "hashchange", function(event){  alert("Old URL: " + event.oldURL + "\nNew URL: " + event.newURL); }); EventUtil.addHandler(window, "hashchange", function(event){  alert("Current hash: " + location.hash); }); 

設備事件

• orientationchange 事件
• MozOrientation 事件
• deviceorientation 事件
• devicemotion 事件

觸摸與手勢事件

 

內存和性能

事件委託

　　事件委託利用了事件冒泡，只指定一個事 件處理程序，就能夠管理某一類型的全部事件。

移除事件處理程序

　　空事件處理程序

• 從文檔中移除帶有事件處理程序的元素時。
• 卸載頁面的時候

　　解決

• 好的作法是在頁面卸載以前，先經過 onunload 事件處理程序移除全部事件處理程序
• 事件委託技術再次表現出它的優點——須要跟蹤的事件處理程序越少，移除它們就越容易

 

模擬事件 

　　模擬鼠標事件

　　模擬鍵盤事件

　　模擬其餘事件

　　自定義 DOM事件