與dom事件流相關的二三事

向dom綁定事件的事件的三種方式

• 行內綁定

<button onclick="clickhander()">按鈕</button>

• js內綁定

btnDom.onclick = function clickHandler() {
    console.log('click');
}

• 事件監聽器綁定

btnDom.addEventListener('click', e => {
    console.log('click');
})

DOM事件流

1. 什麼是DOM事件流？

DOM結構是一個樹形結構，當一個DOM元素產生一個事件，該事件會在當前節點與根節點之間的路徑傳播，路經的全部節點都會接收到該事件，這就是DOM事件流

1. DOM事件流的三個階段

   • 捕獲階段（capture）：從ducoument流向目標節點
   • 目標階段: 到達
   • 冒泡階段：從目標階段冒泡到document節點

關於這三個階段的流程，文檔上有個圖片，描述的十分詳細

1. 事件的執行順序

對於target來講，事件執行，一直會在目標階段。但對於整個事件流上的別的元素來講，執行順序還會受到另一個因素的影響。

咱們來看一個例子，首先dom結構以下

<div id="fa">
    <div id="ch"></div>
</div>

爲其綁定事件

fa.addEventListener('click', e => {
  console.log('click fa')
})

ch.addEventListener('click', e => {
  console.log('click ch')
})

此時點擊ch，打印出的結果是

"click ch"
"click fa"

先執行了ch的事件，後執行了fa的事件，所以咱們能夠得知，fa的事件，是在冒泡階段被執行的。

addEventListener方法，能夠傳入第三個參數，useCapture，boolean，來決定這個執行階段。默認爲false，也就是在冒泡階段，若是設置爲true，則會在捕獲階段

fa.addEventListener('click', e => {
  console.log('click fa')
}, true)

ch.addEventListener('click', e => {
  console.log('click ch')
}, true)

執行結果爲

"click fa"
"click ch"

1. stopPropagation

在事件流的任何一個事件，均可以調用event的stopPropagation方法，來中止事件流。以上面的場景爲例，在捕獲階段執行fa的事件，若是執行stopPropagation，則事件流終止，不會到達目標階段，ch的世界則不會被執行

fa.addEventListener('click', e => {
  console.log('click fa')
  e.stopPropagation();
}, true)

ch.addEventListener('click', e => {
  console.log('click ch')
}, true)

執行結果爲

"click fa"

線上demo

• demo

參考

• 事件流