当鼠标在button上点击时，会在button上触发一个click事件。但是button是div的一个子元素，
在button里点击相当于在div里点击，是否click事件也会触发在div上？如果click事件也触发在div上，
会不会共用同一个事件对象？如果click事件也触发在div上，谁的事件会先发生？click事件还会在哪些元素上面触发。。
到这里，就需要理解事件（Event）一个很重要的机制：事件流（Event Flow）。
事件流动
DOM事件不单单只会在一个Element上触发，它还会流向其他Element。事件的流动通常会经历这么三个阶段：
捕获阶段 -> 目标阶段 -> 冒泡阶段
事件流是一种新的事件分析工具。
它提供了一种方法：
从单个记录和事件序列的可视化和查看数据
使用强大的图形界面搜索感兴趣的时态模式
总结所有的事件序列、它们的时间和流行率，并发现其中的异常。
有两种事件流：
1. 冒泡事件流：当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，
事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，
此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，
在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，
在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。
2.捕获事件流：事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，
事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，
事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了useCapture属性为true,
那么它们可以被分派给这期间的任何元素以对事件做出处理；否则，
事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着通过DOM节点再进行冒泡。
addEventListener() 方法
实例
在用户点击按钮时触发监听事件：
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
语法
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
若一个元素（div）是目标元素（button）的祖先，那事件对象会在该元素上触发两次：
一次是捕获阶段，另一次是冒泡阶段。当事件对象在事件目标元素（button）上触发时，事件流动进入了目标阶段。
部分内容摘自：
http://www.runoob.com/js/js-htmldom-eventlistener.html
https://www.jianshu.com/p/382895a4027d