JavaScript - 事件机制

事件监听

标准：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)