先留下坑，慢慢填
1.什么是事件处理？
DOM 事件类型是分为 UIEvent、UIEvent:KeyEvent、UIEvent:MouseEvent
2.addEventListener
addEventListener() 方法用于向指定元素添加事件句柄,使用 removeEventListener()方法来移除 addEventListener() 方法添加的事件句柄。在这个函数中，最主要的是 第三个参数，
语法
参数值
| 参数 | 描述 |
|---|---|
| event |
必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 |
| function |
必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
| useCapture |
可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值:
|
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
或者直接是匿名函数
audio.addEventListener('seeking', function(e) {
audio.pause();
document.getElementById("play").innerHTML = '<i class="flaticon-play43"></i>';
changeState("paused");
play= false;
},false);
第三个参数为 useCapture，值为 true或false，默认是false
这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段（根节点到子节点检查是否调用了监听函数）→目标阶段（目标本身）→冒泡阶段（目标本身到根节点）。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。
如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false。
当一个事件发生时，分为三个阶段：
捕获阶段 从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。（IE 中无此阶段。）
目标阶段 触发在目标对象本身注册的事件处理程序，也称正常事件派发阶段。
冒泡阶段 从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCapture 为 false，则调用该事件处理程序。
为什么用 addEventListener
- 可以对同一物件的同一事件绑定多个事件处理程序。
- 可以通过事件流三个阶段更好地控制何时触发事件处理程序。
- 工作于 DOM 元素，而不仅是 HTML 元素。
3.onclick
4.addEventListener和onclick区别
5.事件冒泡和事件捕获
先来个直观的演示，请点击事件演示