EventTarget 接口

DOM 节点的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。

该接口主要提供三个实例方法。

• addEventListener()：绑定事件的监听函数
• removeEventListener()：移除事件的监听函数
• dispatchEvent()：触发事件

1、事件模型

第一种“HTML 的 on- 属性”，违反了 HTML 与 JavaScript 代码相分离的原则，将两者写在一起，不利于代码分工，因此不推荐使用。

第二种“元素节点的事件属性”的缺点在于，同一个事件只能定义一个监听函数，也就是说，如果定义两次onclick属性，后一次定义会覆盖前一次。因此，也不推荐使用。

第三种EventTarget.addEventListener是推荐的指定监听函数的方法。它有如下优点：

• 同一个事件可以添加多个监听函数。
• 能够指定在哪个阶段（捕获阶段还是冒泡阶段）触发监听函数。
• 除了 DOM 节点，其他对象（比如window、XMLHttpRequest等）也有这个接口，它等于是整个 JavaScript 统一的监听函数接口。

监听函数内部的this指向触发事件的那个元素节点。

1.1事件的传播

一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。

• 第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）。
• 第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
• 第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。

这种三阶段的传播模型，使得同一个事件会在多个节点上触发

1.2事件的代理

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。

var ul = document.querySelector('ul');

ul.addEventListener('click', function (event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // some code
  }
});

stopPropagation方法分别在捕获阶段和冒泡阶段，阻止了事件的传播。 如果想要彻底取消该事件，不再触发后面所有click的监听函数，可以使用stopImmediatePropagation方法。

2、Event对象

wangdoc.com/javascript/…

3、鼠标事件

4、键盘事件

5、进度事件

6、表单事件

7、触摸事件

8、拖拉事件

9、其他常见的事件

10、GlobalEventHandlers 接口

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

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

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

div.onclick = clickHandler;

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

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

鼠标的事件属性。

• 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