什么是 事件
文档与浏览器发生特定交互的瞬间，叫做事件。
事件用来干什么
用事件来监听预定的事件。when事件发生了，就执行预定的程序。
啥是事件流
事件肯定发生在某一个DOM节点上，发生了之后，事件一级一级的传递，就形成了流。事件流描述的是事件发生之后的顺序。
可以想象画在一张纸上的一组同心圆，如果你把手指放在圆心上，那么你的手指指向的其实不是一个圆，而是纸上所有的圆。...>换句话说，在单击按钮的同时，你也单击了按钮的容器元素，甚至也单击了整个页面。————《JavaScript高级程序设计（第三版）》page 345
这话说的好啊。
DOM2阶段规定的事件流有以下阶段：
1.事件捕获阶段
2.事件处于目标阶段
3.冒泡阶段
一个阶段一个阶段的来。
事件捕获阶段
在这个阶段，事件在某一个节点发生后，一级一级向下传递，最后到了目标节点。
在DOM2级事件规范中，要求事件从document对象开始传递，但是诸如Chrome，Firefox等主流浏览器却是从window开始传递的。
下面看一个例子：
document.querySelector('#btn').addEventListener('click', function () {
console.log("btn was clicked");
},true);
document.querySelector('body').addEventListener('click', function () {
console.log("body was clicked");
},true);
document.querySelector('.box').addEventListener('click', function () {
console.log("box was clicked");
},true);
document.addEventListener('click', function () {
console.log("document was clicked");
},true);
window.addEventListener('click', function () {
console.log("window was clicked");
},true);
实际打印结果是
window...
document...
body..
box...
btn...
由此可见，是从window开始，一直到btn。
事件冒泡阶段
事件冒泡与事件捕获相反，事件冒泡是从一个具体的对象，一直向上传递，直到window对象。这个好理解吗？以我一个菜鸟的理解。捕获的话肯定是从大到小传递消息。要向外传递消息了肯定是从小向大嘛。
阻止事件冒泡
为了防止不必要的错误，我们还可以阻止事件冒泡。
可以使用event.stopPropagation()方法来阻止事件冒泡。
事件委托又是什么呢
它用来解决什么问题呢？
1.每个函数都是对象，是对象就需要占用内存。当页面中包含的事件数量过多时，就会影响性能。
2.某些元素节点是通过JS加载到页面中的，如果我们想对它进行绑定就会绑定失败。
这个时候我们就用到了事件委托。
看下面一段代码：
document.querySelector('.box').addEventListener(function (event) {
switch (event.target.id) {
case "btn":
console.log("btn was clicked");
break;
case "btn-2":
console.log("btn-2 was clicked");
break;
default:
console.log("box was clicked");
break;
}
});
$(".box").append("<button id='btn-2'>btn-2</button>");
想对某个元素节点进行绑定事件，可以先让它父节点或者祖父节点盯着。委托给它的父节点。
OVER
本篇文章是对于一篇博客的笔记 作者：司楠 链接：segmentfault.com/a/119000000…
