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

阿新 • • 發佈：2020-07-24

事件

事件流

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

事件處理程式

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);
});