JavaScript GlobalEventHandlers 接口

指定事件的回調函數(shù)，推薦使用的方法是元素的addEventListener方法。

div.addEventListener('click', clickHandler, false);

除了之外，還有一種方法可以直接指定事件的回調函數(shù)。

div.onclick = clickHandler;

這個接口是由GlobalEventHandlers接口提供的。它的優(yōu)點是使用比較方便，缺點是只能為每個事件指定一個回調函數(shù)，并且無法指定事件觸發(fā)的階段（捕獲階段還是冒泡階段）。

HTMLElement、Document和Window都繼承了這個接口，也就是說，各種 HTML 元素、document對象、window對象上面都可以使用GlobalEventHandlers接口提供的屬性。下面就列出這個接口提供的主要的事件屬性。

GlobalEventHandlers.onabort 

某個對象的abort事件（停止加載）發(fā)生時，就會調用onabort屬性指定的回調函數(shù)。

各種元素的停止加載事件，到底如何觸發(fā)，目前并沒有統(tǒng)一的規(guī)定。因此實際上，這個屬性現(xiàn)在一般只用在<img>元素上面。

// HTML 代碼如下
// <img src="example.jpg" id="img">
var img = document.getElementById('img');
img.onabort = function () {
  console.log('image load aborted.');
}

GlobalEventHandlers.onerror 

error事件發(fā)生時，就會調用onerror屬性指定的回調函數(shù)。

error事件分成兩種。

一種是 JavaScript 的運行時錯誤，這會傳到window對象，導致window.onerror()。

window.onerror = function (message, source, lineno, colno, error) {
  // ...
}

window.onerror的處理函數(shù)共接受五個參數(shù)，含義如下。

• message：錯誤信息字符串
• source：報錯腳本的 URL
• lineno：報錯的行號，是一個整數(shù)
• colno：報錯的列號，是一個整數(shù)
• error： 錯誤對象

另一種是資源加載錯誤，比如<img>或<script>加載的資源出現(xiàn)加載錯誤。這時，Error 對象會傳到對應的元素，導致該元素的onerror屬性開始執(zhí)行。

element.onerror = function (event) {
  // ...
}

注意，一般來說，資源的加載錯誤不會觸發(fā)window.onerror。

GlobalEventHandlers.onload、GlobalEventHandlers.onloadstart 

元素完成加載時，會觸發(fā)load事件，執(zhí)行onload()。它的典型使用場景是window對象和<img>元素。對于window對象來說，只有頁面的所有資源加載完成（包括圖片、腳本、樣式表、字體等所有外部資源），才會觸發(fā)load事件。

對于<img>和<video>等元素，加載開始時還會觸發(fā)loadstart事件，導致執(zhí)行onloadstart。

GlobalEventHandlers.onfocus，GlobalEventHandlers.onblur 

當前元素獲得焦點時，會觸發(fā)element.onfocus；失去焦點時，會觸發(fā)element.onblur。

element.onfocus = function () {
  console.log("onfocus event detected!");
};
element.onblur = function () {
  console.log("onblur event detected!");
};

注意，如果不是可以接受用戶輸入的元素，要觸發(fā)onfocus，該元素必須有tabindex屬性。

GlobalEventHandlers.onscroll 

頁面或元素滾動時，會觸發(fā)scroll事件，導致執(zhí)行onscroll()。

GlobalEventHandlers.oncontextmenu，GlobalEventHandlers.onshow 

用戶在頁面上按下鼠標的右鍵，會觸發(fā)contextmenu事件，導致執(zhí)行oncontextmenu()。如果該屬性執(zhí)行后返回false，就等于禁止了右鍵菜單。document.oncontextmenu與window.oncontextmenu效果一樣。

document.oncontextmenu = function () {
  return false;
};

上面代碼中，oncontextmenu屬性執(zhí)行后返回false，右鍵菜單就不會出現(xiàn)。

元素的右鍵菜單顯示時，會觸發(fā)該元素的onshow監(jiān)聽函數(shù)。

其他的事件屬性 

鼠標的事件屬性。

• onclick
• ondblclick
• onmousedown
• onmouseenter
• onmouseleave
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onwheel

鍵盤的事件屬性。

• onkeydown
• onkeypress
• onkeyup

焦點的事件屬性。

• onblur
• onfocus

表單的事件屬性。

• oninput
• onchange
• onsubmit
• onreset
• oninvalid
• onselect

觸摸的事件屬性。

• ontouchcancel
• ontouchend
• ontouchmove
• ontouchstart

拖動的事件屬性分成兩類：一類與被拖動元素相關，另一類與接收被拖動元素的容器元素相關。

被拖動元素的事件屬性。

• ondragstart：拖動開始
• ondrag：拖動過程中，每隔幾百毫秒觸發(fā)一次
• ondragend：拖動結束

接收被拖動元素的容器元素的事件屬性。

• ondragenter：被拖動元素進入容器元素。
• ondragleave：被拖動元素離開容器元素。
• ondragover：被拖動元素在容器元素上方，每隔幾百毫秒觸發(fā)一次。
• ondrop：松開鼠標后，被拖動元素放入容器元素。

<dialog>對話框元素的事件屬性。

• oncancel
• onclose