事件机制

事件触发三阶段

事件触发有三个阶段：

• window 往事件触发处传播，遇到注册的捕获事件会触发
• 传播到事件触发处时触发注册的事件
• 从事件触发处往 window 传播，遇到注册的冒泡事件会触发

事件触发一般来说会按照上面的顺序进行，但是也有特例，如果给一个 body 中的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。

注册事件

通常使用 addEventListener 注册事件，该函数的第三个参数可以是布尔值，也可以是对象。第三个参数默认值为 false，决定了注册的事件是捕获事件（ture 为）还是冒泡事件。

一般来说，如果我们只希望事件只触发在目标上，这时候可以使用 stopPropagation 来阻止事件的进一步传播。通常我们认为 stopPropagation 是用来阻止事件冒泡的，其实该函数也可以阻止捕获事件。stopImmediatePropagation 同样也能实现阻止事件，但是还能阻止该事件目标执行别的注册事件。

target 和 currentTarget

在了解上述的事件传递的三个阶段后，我们来梳理事件对象中容易混淆的两个属性：target 和 currentTarget 。

target 是触发事件的某个具体的对象，只会出现在事件机制的目标阶段，即“谁触发了事件，谁就是 target ”。 currentTarget 是绑定事件的对象。

取消默认操作

取消默认操作 w3c 的方法是 e.preventDefault()，IE 则是使用 e.returnValue = false;

function cancelHandler(event) {
  var event = event || window.event //用于IE
  if (event.preventDefault) event.preventDefault() //标准技术
  if (event.returnValue) event.returnValue = false //IE
  return false //用于处理使用对象属性注册的处理程序
}

onCompositionStart & onCompositionEnd

在输入框内输入拼音的时候，在拼音上位输入时，会触发Input的onChange事件，输入完成后onCompositionEnd事件。