[TOC] # 1. 事件三要素 1. 事件源：觸發(被)事件的元素 2. 事件類型：事件的觸發方式(例如鼠標點擊或鍵盤點擊) 3. 事件處理程序：事件觸發后要執行的代碼(函數形式) # 2. 注冊事件/移除事件三方式 ```js var box = document.getElementById('box'); // 注冊方式1 box.onclick = function () { console.log('點擊后執行'); }; // 移除方式1 box.onclick = null; // 注冊方式2 box.addEventListener('click', eventCode, false); // 移除方式2 box.removeEventListener('click', eventCode, false); // 注冊方式3 box.attachEvent('onclick', eventCode); // 移除方式3 box.detachEvent('onclick', eventCode); function eventCode() { console.log('點擊后執行'); } ``` # 3. 為標簽綁定任何事件（兼容處理） ```js // 可以為標簽添加任何一種事件 function addAnyEventListener(element, eventType, fn) { if (element.addEventListener) { // 需要判斷瀏覽器是否支持當前的事件類型 element.addEventListener(eventType, fn, false); } else if (element.attachEvent){ element.attachEvent('on' + eventType,fn); } else { element['on'+eventType] = fn; // 相當于給對象element賦值fn，如ele = {eventType: fun} } } // 可以為標簽移除任何一種事件 function removeAnyEventListener(element, eventType, fn) { if (element.removeEventListener) { element.removeEventListener(eventType, fn, false); } else if (element.detachEvent) { element.detachEvent('on' + eventType, fn); } else { element['on'+eventType] = null; } } ``` # 4. 事件的三個階段 1. 捕獲階段 2. 當前目標階段 3. 冒泡階段 event.eventPhase屬性可以查看事件觸發時所處的階段 **`事件的三個階段.html`** ```js <pre> 事件共有三個階段： 1.事件捕獲階段 :從外向內 2.事件目標階段 :最開始選擇的那個 3.事件冒泡階段 : 從里向外 addEventListener(event, function, useCapture)中的useCaptrue就是設置捕獲階段或冒泡階段的。 通過e.eventPhase這個屬性可以知道當前的事件是什么階段的： 如果這個屬性的值是: 1---->捕獲階段 2---->目標階段 3---->冒泡 一般默認都是冒泡階段,很少用捕獲階段 冒泡階段:從里向外 捕獲階段:從外向內 </pre> <script type="text/javascript"> document.getElementById("div1").onclick = function(e) { console.log(e.eventPhase); } document.getElementById("div1").onclick = function(e) { console.log(e.eventPhase); } document.getElementById("div1").onclick = function(e) { console.log(e.eventPhase); } </script> ```