ert', false, false);     // 初始化自定義事件名稱
	div1.addEventListener('alert', function () {    // 監聽事件
				alert('alert一下吧')
			}, false)
	div1.dispatchEvent(alertEven)   // 觸發事件
複製程式碼

`

用這種方式我們同樣可以完成一個自定義事件。這兩種方式本質上並沒有什麼區別，它們都有同樣的步驟，建立事件例項，addEventListener()監聽事件，dispatchEvent()觸發執行，而且它們都是繼承製EventTarget介面。

2.事件傳播

在我們日常工作當中，事件冒泡這個事件行為，肯定是有遇到的，先不說是否是經常，遇到後大家也知道使用event.stopPropagation()來阻止冒泡，還有在使用element.addEventListener(type,fn,false)事件監聽的方式繫結事件時，它的第三個引數是個布林值，預設false，表示冒泡階段觸發,如果設定為true則表示捕獲階段觸發，問題來了：觸發事件後的事件傳播是怎樣的呢？其實一個事件發生後，事件會在子元素和父元素之間傳播，共三個階段：

• 階段1：從window物件傳導到目標節點（上層傳到底層），稱為“捕獲階段”（capture phase）;
• 階段2：在目標節點上觸發，稱為“目標階段”（target phase）;
• 階段3：從目標節點傳導回window物件（從底層傳回上層），稱為“冒泡階段”（bubbling phase）。

那麼我們怎麼判斷我們的事件觸發後處於在哪個階段呢，在event例項物件上有一個屬性event.eventPhase返回一個整數常量，就是用來表示事件目前所處的階段：

• 0 表示事件目前沒有發生，
• 1 表示事件目前處於捕獲階段，從父節點向目標節點傳送過程(從上向下傳遞)，
• 2 表示事件到達目標節點，即Event.target屬性指向的那個節點，
• 3 表示事件冒泡階段，即從目標節點向父節點傳遞(從下向上傳遞)。

有了上面的認識，我們下面看個例子： `

<span id='s1'><button id='b1'>click me</button></span>

var s1 = document.getElementById('s1'), tx1 = document.getElementById('tx1');

b1.addEventListener('click', eventObj, false);
b1.addEventListener('click', eventObj, true);
s1.addEventListener('click', eventObj, false);
s1.addEventListener('click', eventObj, true);

function eventObj (event) {
    // event.stopPropagation();
	var el = event.currentTarget.tagName;
	console.log(el , event.eventPhase)
}   // 則可以看見span的事件會輸出1，3，button的事件會輸出兩次2
// 如果我們放開event.stopPropagation()的註釋，則只會輸出1
複製程式碼

`

有了這些認識，大家首先想的肯定是它的實際應用價值，有什麼用呢？最最常用的，就是：事件代理， 事件代理是基於事件冒泡的特性擴展出來的開發方式，事件代理的優勢是由父節點監聽子節點的事件行為，並統一處理子節點觸發的事件函式，這樣做就減少了瀏覽器對事件的監聽，處理程式對記憶體的開銷，進而提高效能。簡單來說就是,你去盯五個人的稍和盯一個人的稍，你會覺得哪個容易一點？道理就這麼簡單。而我們最常應用事件代理的地方就是分頁控制元件。

3.常用事件屬性和方法

event事件物件是個龐大的物件，下面又擁有眾多的屬性和方法，總有一些是我們常用的和不常用的，下面我們稍微列一下我們常用的屬性和方法，供大家參考：

• element.addEventListener()：二級DOM事件繫結方法，接收三個引數：引數一:事件型別，引數二，執行的方法，引數三布林值，什麼節點捕獲事件。
• element.removeEventListener()：移除二級DOM事件，注意：該方法要和繫結的事件型別，繫結的元素，捕獲階段都要保持一至。
• element.dispatchEvent()：方法在當前節點上觸發指定自定義事件，從而觸發監聽函式的執行。
• event.eventPhase：返回觸發的事件目前所處階段，詳細請看上面的介紹。
• event.cancelBubble：屬性是個布林值，設定為true時可以取消事件冒泡。
• event.preventDefault()：取消瀏覽器對當前事件的預設行為。
• event.currentTarget，event.target：獲取事件觸發的目標節點元素，currentTarget返回事件當前所在的節點，即正在執行的監聽函式所繫結的那個節點,target返回原始觸發事件的那個節點，即事件最初發生的節點。
• event.type：返回一個字串，表示觸發的事件型別。
• event.stopPropagation()：方法阻止事件在 DOM 中繼續傳播,一般用於阻止事件冒泡這類行為的。
• event.stopImmediatePropagation()：該方法同樣可以阻止事件冒泡，不同的是在觸發一次後，它會徹底登出掉傳播的事件監聽的函式。
• mouseEvent.clientX，mouseEvent.clientY：滑鼠事件觸發時，返回滑鼠指標相對於瀏覽器視窗的水平座標和垂直座標值。
• mouseEvent.button：滑鼠事件，返回一個數值，表示按下了滑鼠哪個鍵：0表示左鍵，1表示滾輪，2表示右鍵，預設0。
• mouseEvent.ctrlKey：布林值，是否同時按下了 Ctrl 鍵，預設值為false。
• mouseEvent.shiftKey：布林值，是否同時按下了 Shift 鍵，預設值為false。
• mouseEvent.altKey：布林值，是否同時按下 Alt 鍵，預設值為false。
• mouseEvent.metaKey：布林值，是否同時按下 Meta 鍵，預設值為false。
• KeyboardEvent.keyCode：鍵盤事件，返回按下鍵盤按鈕的鍵碼。
• KeyboardEvent.code:鍵盤事件，返回按下鍵的code。
• KeyboardEvent.key:鍵盤事件，返回按下鍵的鍵名，比如按下數字1，返回就是1，按下a，返回就是a。

總結

在上面我列舉了個人認為常用的一些事件屬性和方法，其實還有不少並未列舉到，詳細的大家可以去網道這裡檢視吧，這裡是我參考的地方。今天本文呢主要目的是和大家分享一些event非常有使用，但是又不常用的一些特性，比如上面的自定義事件，和事件傳播的概念，希望本文對你有所幫助，正所謂碼字不易，喜歡的朋友煩請點個贊，謝謝。

作者：IT男爵
連結：https://juejin.im/post/5bdffe696fb9a049b77fcf71
來源：掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。