13 | 读JavaScript 高程 | 事件

这一篇呢是第13章，内容是和事件相关。

事件可以看成是条件判断的一种条件，逻辑是某个元素发生了某个事情，我要做出相应的反应。

有个叫做ifttt的服务将这种逻辑发挥到了极致。

ifttt

核心是如何监控事件，进而引发有哪些事件可以监控的问题？

知识点：
1.我点的是谁？
2.如何监测事件？
3.有哪些事件可以监听？
4.要监听的事件过多，处理不过来，怎么办？
5.我可不可以自定义事件嘞？

1.我点的是谁？

当1被点击时，2和3被点击了吗？这里的规定是是的，甚至整个页面都被点击了，这其实有点地图炮的意味，某人怎样可以上升到某省怎样，再上升到全人类怎样。

既然都被点击了，那我要监控某个元素要如何搞，虽然都被点击了，但总要有个先后顺序的。

事件冒泡event bubbling，事件从最具体的元素接收，向上传播，即1->2->3

事件捕获event capturing，不太具体的节点最早接收事件，最具体的节点最后接收事件，目的是再事件到达预定目标前捕获事件，让事件去遛一圈，我好准备，即3->2>1。

DOM2级事件规定的流程是：事件捕获，处于目标阶段，和事件冒泡。即3->2->1->2->3。

整的还挺复杂。

2.如何监测事件？

// DOM0 级事件处理程序
btn.onclick = function(){}
btn.onclick = null

// DOM2 级事件处理程序
btn.addEventListener('click', function(){}, false)
// false 指事件处于冒泡阶段时触发。

3.事件对象长啥样？

当触发DOM事件时，会产生一个事件对象event，该对象包含了与事件相关的信息。

document.addEventListener('click', e=>console.log(e), false)

event

3.有哪些事件可以监听？
根据手机壳改变主题。

用的最多的要数click事件，其实可以监听的事件还有很多种。这里列出使用过的。

click 点击事件
scroll 事件在移动端经常使用
focus 获得焦点
blur 失去焦点
鼠标事件，最近喜欢上了触摸板，就不测试了。

移动端事件，300ms延迟。
触摸事件：
touchstart
touchmove
touchend
touchcancel

4.要监听的事件过多，处理不过来，怎么办？

监听的事件过多，会消耗计算资源，如何节省计算资源呢？事件委托并移除事件处理程序。

很简单，有事秘书干。这个术语叫做事件委托，指定一个事件处理程序管理某一类型的所有事件。

思路是在顶层注册事件，在回调中判断点击的实际对象并做相应的处理。click非常适合采用事件委托技术。

5.我可不可以自定义事件嘞？

说白了，事件对象就是一系列属性的集合，前面看到的各种事件不过时一些属性上的差异，如果我们创建一个对象并比照event对象添加一些属性，那么就可以自定义事件了，术语叫做模拟事件。

模拟事件的流程：创建 event 对象，相关信息初始化，触发事件。