先留下坑，慢慢填
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.事件冒泡和事件捕獲
先來個直觀的演示，請點擊事件演示