事件监听
标准：addEventListener(eventType, handler, useCapture) / IE：attachEvent(eventType, handler)
removeEventListener, detachEvent
之所以出现这两种是因为当时网景主张事件捕获，微软主张事件冒泡。w3c标准下采取了折中，先捕获再冒泡。
这样，事件的触发过程就有了三个阶段：
1,捕获阶段：document往事件触发地点，向下捕获前进，遇到相同的注册事件类型就立即触发执行。
2,到达事件位置：触发事件。
3,冒泡阶段：从事件触发位置向document往外冒泡，遇到相同注册事件就立即触发。
ps: dom1级事件绑定只能在冒泡阶段触发
在同一个对象上注册事件，也并不一定按照注册的顺序执行，而是按照事件绑定的节点顺序。
值得一提的，阻止冒泡的stopPropagation()的方法，它不止会阻止事件冒泡，还会阻止事件捕获。
比如你在捕获类型中使用，它会阻止事件的进一步传播。
值得一提的，stopImmediatePropagation()方法。如果给一个对象注册了两次click事件，分别执行两个处理函数func1/func2。
那么在func1中使用stopPropagation，func2也会执行，只有使用stopImmediatePropagation()才能立即中断事件处理。
HTML内联 / DOM属性绑定
耦合度高
自定义事件
Event
1,new一个Event实例，参数是事件类型名。`new Event('myevent')`
2,绑定事件监听 `elem.addEventListener('myevent', function (e) { ... }, false);`
3,dispatchEvent模拟触发事件 `elem.dispatchEvent(event);`
CustomEvent
1,new 一个实例 `new CustomEvent(eventname, options)`
2,3,同上
附带数据options
```
{
detail: { //初始化信息 },
bubbles: true,
....
}
```
模拟事件触发，是可以冒泡的~
事件代理
原理是，事件绑定后，将会从绑定的父元素节点向下前进到触发事件的元素，再冒泡回绑定的父元素dom.
所以我们不必为每个子元素都注册上事件，只要对他的父元素进行监听，即可代理对后代dom的监听。
而我只需要通过event.target就能获得触发的子元素并响应。
这样意味着，节省了大量重复的事件监听，减少资源消耗；让html独立，如有增加子元素，也不必再单独监听。
事件对象
每个事件被触发的时候，会创建一个事件对象Event Object。
常用属性/方法：
type:
target: 要触发的目标节点（IE -> srcElement）
currentTarget: 正在处理事件的节点（IE -> this）
bubbles: 事件是否在冒泡阶段触发
stopPropagation():
preventDefault(): 禁止默认行为
cancelable: 是否可以使用preventDefault()禁止默认行为
eventPhase: 事件触发处于什么阶段（0 none - 1 - 2 - 3）
pageX: pageY...
常用事件
load: 所有资源加载好之后触发
DOMContentLoaded: DOM 构建好之后触发（jQuery.ready）
resize:
当节点尺寸发生变化时，触发这个事件。通常用在 window 上，这样可以监听浏览器窗口的变化。
通常用在复杂布局和响应式上。
出于对性能的考虑，你可以使用函数 throttle 或者 debounce 技巧来进行优化。
throttle 方法大体思路就是在某一段时间内无论多次调用，只执行一次函数，到达时间就执行；
debounce 方法大体思路就是在某一段时间内等待是否还会重复调用，如果不会再调用，就执行函数，如果还有重复调用，则不执行继续等待。
error: 加载资源失败或者加载成功但是只加载一部分而无法使用时触发
参考
[Event](https://developer.mozilla.org/en-US/docs/Web/API/Event#Properties)
[Events Order](http://www.quirksmode.org/js/events_order.html)