JavaScript之HTML DOM Event

当鼠标在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() 方法来移除事件的监听。

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

若一个元素（div）是目标元素（button）的祖先，那事件对象会在该元素上触发两次：

一次是捕获阶段，另一次是冒泡阶段。当事件对象在事件目标元素（button）上触发时，事件流动进入了目标阶段。

部分内容摘自：

http://www.runoob.com/js/js-htmldom-eventlistener.html

https://www.jianshu.com/p/382895a4027d