GlobalEventHandlers 接口

指定事件的回调函数，推荐使用的方法是元素的 addEventListener 方法。

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

除了之外，还有一种方法可以直接指定事件的回调函数。

div.onclick = clickHandler;

这个接口是由 GlobalEventHandlers 接口提供的。它的优点是使用比较方便，缺点是只能为每个事件指定一个回调函数，并且无法指定事件触发的阶段（捕获阶段还是冒泡阶段）。

HTMLElement 、 Document 和 Window 都继承了这个接口，也就是说，各种 HTML 元素、 document 对象、 window 对象上面都可以使用 GlobalEventHandlers 接口提供的属性。下面就列出这个接口提供的主要的事件属性。

GlobalEventHandlers.onabort #

某个对象的 abort 事件（停止加载）发生时，就会调用 onabort 属性指定的回调函数。

各种元素的停止加载事件，到底如何触发，目前并没有统一的规定。因此实际上，这个属性现在一般只用在 <img> 元素上面。

// 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() 。

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

window.onerror 的处理函数共接受五个参数，含义如下。

message：错误信息字符串
source：报错脚本的 URL
lineno：报错的行号，是一个整数
colno：报错的列号，是一个整数
error：错误对象

另一种是资源加载错误，比如 <img> 或 <script> 加载的资源出现加载错误。这时，Error 对象会传到对应的元素，导致该元素的 onerror 属性开始执行。

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 。

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 效果一样。

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