DOM事件、事件流、注册事件、事件委托、事件捕获、事件冒泡

DOM（Document Object Model）：是处理html或xhtml的标准编程接口。通过这些接口可以改变网页内容、结构和样式。

1.1 什么是事件？

事件是可以被JavaScript检测到的行为（触发-响应机制）。事件由三元素构成：

• 事件源：触发事件的元素
• 事件类型：例如click点击事件
• 事件处理程序：事件触发后要执行的代码
  执行事件的步骤：获取事件源 => 注册事件（绑定事件） => 添加事件处理程序

1.2 注册事件

注册事件有两种方式：传统方式和监听注册方式

• 传统方式
  利用on开头的事件onclick

<button onclick="alert('Hello World')">button>

也可以换成function的方式另外编写。
特点：注册事件有唯一性，同一个元素只能设置一个函数，最后注册的函数会将前面注册的函数覆盖掉

• 监听注册

eventTarget.addEventListener(type,listener[,useCapture])

将指定的监听器注册到eventTarget中，当该对象触发指定事件时，就会执行处理函数。
type：事件类型字符串，如：‘click’,‘mouseover’
listener：事件处理函数，事件发生时，会调用该函数
useCapture：可选值，默认为false，这个参数涉及到事件的捕获与冒泡，为true时捕获，false时冒泡
这样，同一个元素同一个事件就可以注册多个监听器，但是addEventListener在IE9前不支持，要用attachEvent代替。

1.3 事件流

事件流描述的是从页面中接收事件的顺序，事件发生时会在元素节点之间按照特定顺序传播，称为DOM事件流。
捕获阶段—>当前目标阶段—>冒泡阶段
需要注意的是：

1. JavaScript代码只能执行捕获或冒泡
2. onclick和attachEvent只能到冒泡阶段
3. 有些事件没有冒泡：onblur，onfocus，load，unload，resize

1.4 事件委托（事件代理）

事件委托就是不给目标元素注册事件，给目标元素的父元素注册事件，把处理代码放在父元素事件中执行，然后利用冒泡原理影响设置的每个节点。这样做的好处是只操作了一次DOM，提高了程序性能；即使是新添加的元素依然可以触发该事件。

1.5 事件捕获

事件捕获是指不太具体的元素更早的接收到事件，而最具体的节点最后接收到事件。用意是在事件到达目标之前就捕获它，与事件冒泡的过程正好相反。以HTML的click事件为例，document最先接收到click事件，然后事件沿着DOM依次向下传递，一直传播到事件的实际目标。

1.6 事件冒泡

在一个对象上触发某类事件（比如click事件）时，如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序；如果没有此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至他被处理，或者到达了对象的最顶层（document）。
冒泡型事件触发顺序是从最特定的事件目标到最不特定的事件目标。

阻止冒泡的方法：

• 标准浏览器

eventTarget.stopPropagation()

• IE浏览器

eventTarget.cancelBubble = true