事件流
1、事件冒泡
事件冒泡是IE 的事件流，事件是由需要操作的的元素，然后逐级向上传播，在每一级的节点上都会发生，直到传播到document对象，向Chrome这样的浏览器会冒泡到window；
2、事件捕获
事件捕获是Netscape浏览器开发团队提出的， 他们思想和IE 的截然相反（个人认为 IE的反而更好理解）。他们认为 事件是从window =》 document =》 具体元素， 称之为事件捕获
3、DOM 事件流
由于 ie 和 Netscape 在事件上没法达成一致，问题上升到 w3c， 然后给出 最终到结论是， 事件捕获阶段，目标阶段，事件冒泡阶段。（你们两家都有道理， 我来处理成你们都可以接受的样子）
DOM 中事件对象
一般在我们触发事件之后，会在事件模型 event 对象中获取很多属性和方法，从而可以使用对象的属性和方法。我随意列出几个。
bubbles：返回一个布尔值，表示当前事件是否会冒泡。
cancelable：返回一个布尔值，表示事件是否可以取消。该属性为只读属性
currentTarget：事件处理程序当前正在处理事件的那个元素
preventDefault()：取消事件的默认行为。如果 cancelable 是true，则可以使用这个方法
stopPropagation()：取消事件的进一步捕获或冒泡。如果 bubbles为 true，则可以使用这个方法。
事件委托
事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素； 委托的优点
- 减少内存消耗
试想一下，若果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件；
[创建自定义事件]
Events 可以使用 Event 构造函数创建如下：
2. 动态绑定事件
在很多时候，我们需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；
var event = new Event('build');
// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);
// Dispatch the event.
elem.dispatchEvent(event);
[添加自定义数据 – CustomEvent()]
const event = new CustomEvent('build', { 'detail': elem.dataset.time });
[事件冒泡]
<form>
<textarea></textarea>
</form>
const form = document.querySelector('form');
const textarea = document.querySelector('textarea');
const eventAwesome = new CustomEvent('awesome', {
bubbles: true,
detail: { text: () => textarea.value }
});
