[TOC] ## EventTarget 接口 DOM 的事件操作（監聽和觸發），都定義在EventTarget接口。所有節點對象都部署了這個接口 ### EventTarget.addEventListener() 添加監聽 `target.addEventListener(type, listener[, useCapture]); ` * `type`：事件名稱，大小寫敏感。 * `listener`：監聽函數。事件發生時，會調用該監聽函數。 * `useCapture`：布爾值，表示監聽函數是否在捕獲階段（capture）觸發，**默認**為`false`（監聽函數只在冒泡階段被觸發）。該參數可選。 **第二個參數** 可以是 `handleEvent`對象 ``` buttonElement.addEventListener('click', { handleEvent: function (event) { console.log('click'); } }); ``` **第三參數** 可配置對象 * `capture`：布爾值，表示該事件是否在`捕獲階段`觸發監聽函數。 * `once`：布爾值，表示監聽函數是否只觸發一次，然后就自動移除。 * `passive`：布爾值，表示監聽函數不會調用事件的`preventDefault`方法。如果監聽函數調用了，瀏覽器將忽略這個要求，并在監控臺輸出一行警告。 - 當前對象同一事件監聽不同函數,會順序觸發,若監聽的函數也相同,則只觸發一次 > 如果希望向監聽函數傳遞參數，可以用匿名函數包裝一下監聽函數 ``` function print(x) { console.log(x); } var el = document.getElementById('div1'); el.addEventListener('click', function () { print('Hello'); }, false); ``` ### EventTarget.removeEventListener() 移除監聽 error 不是同一個匿名函數 ``` div.addEventListener('click', listener, false); div.removeEventListener('click', listener, false); ``` ok ``` element.addEventListener('mousedown', handleMouseDown, true); element.removeEventListener("mousedown", handleMouseDown, false); ``` ### EventTarget.dispatchEvent() 觸發事件 ``` para.addEventListener('custom', hello, false); var event = new Event('custom'); para.dispatchEvent(event); ```