DOM（文档对象模型）
事件
1、事件捕获
当鼠标点击或者触发 dom 事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
2、事件冒泡
与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。
// html
<body>
<div class="wrap">
<div class="box1">box1</div>
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
// js
var box1 = document.getElementsByClassName('box1')[0]
box1.addEventListener('click', function(e) {
console.log('box1')
})
document.addEventListener('click', function() {
console.log('111')
})
// 点击box1----> 输出 'box1' ----> '1111'
element.addEventListener(event, function, useCapture)
- event：需要绑定的事件
- function：触发事件后要执行的函数
- useCapture：默认值是 false，表示在事件冒泡阶段调用事件处理函数。如果参数为 true，则表示在事件捕获阶段调用处理函数。
修改document的监听事件，使其在事件捕获阶段就触发事件。
document.addEventListener('click', function() {
console.log('111')
}, true)
// 点击box1----> 输出 '1111' ----> 输出'box1'
3、事件委托
基于事件冒泡机制，我们可以实现将子元素的事件委托给父级元素来进行处理。 当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。
好处是：
1、不用在子元素上重复绑定事件，只需要在父元素上绑定一次。
2、将事件委托给父节点，这样我们对子元素的增加和删除、移动等，都不需要重新进行事件绑定。
虚拟DOM
所以随着应用程序越来越复杂，DOM操作越来越频繁，需要监听事件和在事件回调用更新页面的 DOM 操作也越来越多，性能消耗则会比较大。于是乎，虚拟DOM的想法便被人提出并实现了。
虚拟DOM其实是用来模拟真实DOM的中间产物，主要包括以下功能：
1. 用JS对象模拟DOM树，简化DOM对象。
简单来说，就是用一个对象模拟，保留主要的一些DOM属性，其他的则去掉。
2. 使用虚拟DOM，结合操作DOM的接口，来生成真实DOM。
使用假DOM生成真DOM，同时保持真实DOM对象的引用，以便 3 步骤的执行。
3. 更新DOM时，比较两棵虚拟DOM树的差异，局部更新真实DOM。
这个就比较有意思，可以根据数据的变化，来最小化地移动、替换、删除原有的DOM元素。
BOM（浏览器对象模型）
DOM是为了操作文档出现的API，包括document。
BOM是为了操作浏览器出现的API，包括window、location、history等。
window对象
全局变量是window对象的属性，全局函数是window对象的方法。
如window.location、 window.history、alert()、setTimeout()等
