# GlobalEventHandlers 接口 指定事件的回調函數，推薦使用的方法是元素的`addEventListener`方法。 ```javascript div.addEventListener('click', clickHandler, false); ``` 除了之外，還有一種方法可以直接指定事件的回調函數。 ```javascript div.onclick = clickHandler; ``` 這個接口是由`GlobalEventHandlers`接口提供的。它的優點是使用比較方便，缺點是只能為每個事件指定一個回調函數，并且無法指定事件觸發的階段（捕獲階段還是冒泡階段）。 `HTMLElement`、`Document`和`Window`都繼承了這個接口，也就是說，各種 HTML 元素、`document`對象、`window`對象上面都可以使用`GlobalEventHandlers`接口提供的屬性。下面就列出這個接口提供的主要的事件屬性。 ## GlobalEventHandlers.onabort 某個對象的`abort`事件（停止加載）發生時，就會調用`onabort`屬性指定的回調函數。 各種元素的停止加載事件，到底如何觸發，目前并沒有統一的規定。因此實際上，這個屬性現在一般只用在`<img>`元素上面。 ```javascript // HTML 代碼如下 // <img src="example.jpg" id="img"> var img = document.getElementById('img'); img.onabort = function () { console.log('image load aborted.'); } ``` ## GlobalEventHandlers.onerror `error`事件發生時，就會調用`onerror`屬性指定的回調函數。 `error`事件分成兩種。 一種是 JavaScript 的運行時錯誤，這會傳到`window`對象，導致`window.onerror()`。 ```javascript window.onerror = function (message, source, lineno, colno, error) { // ... } ``` `window.onerror`的處理函數共接受五個參數，含義如下。 - message：錯誤信息字符串 - source：報錯腳本的 URL - lineno：報錯的行號，是一個整數 - colno：報錯的列號，是一個整數 - error： 錯誤對象 另一種是資源加載錯誤，比如`<img>`或`<script>`加載的資源出現加載錯誤。這時，Error 對象會傳到對應的元素，導致該元素的`onerror`屬性開始執行。 ```javascript element.onerror = function (event) { // ... } ``` 注意，一般來說，資源的加載錯誤不會觸發`window.onerror`。 ## GlobalEventHandlers.onload、GlobalEventHandlers.onloadstart 元素完成加載時，會觸發`load`事件，執行`onload()`。它的典型使用場景是`window`對象和`<img>`元素。對于`window`對象來說，只有頁面的所有資源加載完成（包括圖片、腳本、樣式表、字體等所有外部資源），才會觸發`load`事件。 對于`<img>`和`<video>`等元素，加載開始時還會觸發`loadstart`事件，導致執行`onloadstart`。 ## GlobalEventHandlers.onfocus，GlobalEventHandlers.onblur 當前元素獲得焦點時，會觸發`element.onfocus`；失去焦點時，會觸發`element.onblur`。 ```javascript element.onfocus = function () { console.log("onfocus event detected!"); }; element.onblur = function () { console.log("onblur event detected!"); }; ``` 注意，如果不是可以接受用戶輸入的元素，要觸發`onfocus`，該元素必須有`tabindex`屬性。 ## GlobalEventHandlers.onscroll 頁面或元素滾動時，會觸發`scroll`事件，導致執行`onscroll()`。 ## GlobalEventHandlers.oncontextmenu，GlobalEventHandlers.onshow 用戶在頁面上按下鼠標的右鍵，會觸發`contextmenu`事件，導致執行`oncontextmenu()`。如果該屬性執行后返回`false`，就等于禁止了右鍵菜單。`document.oncontextmenu`與`window.oncontextmenu`效果一樣。 ```javascript document.oncontextmenu = function () { return false; }; ``` 上面代碼中，`oncontextmenu`屬性執行后返回`false`，右鍵菜單就不會出現。 元素的右鍵菜單顯示時，會觸發該元素的`onshow`監聽函數。 ## 其他的事件屬性 鼠標的事件屬性。 - 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：拖動過程中，每隔幾百毫秒觸發一次 - ondragend：拖動結束 接收被拖動元素的容器元素的事件屬性。 - ondragenter：被拖動元素進入容器元素。 - ondragleave：被拖動元素離開容器元素。 - ondragover：被拖動元素在容器元素上方，每隔幾百毫秒觸發一次。 - ondrop：松開鼠標后，被拖動元素放入容器元素。 `<dialog>`對話框元素的事件屬性。 - oncancel - onclose