element ui treetable 觸發展開事件_DOM事件模型與事件機制
技術標籤：element ui treetable 觸發展開事件
DOM事件模型
文件物件模型 (DOM)developer.mozilla.org
事件流
DOM是個樹形結構，當我們在頁面上單擊一個按鈕，頁面上哪些元素會觸發這個事件，是發生在這個按鈕上，還是這個按鈕的容器元素（我們說父元素）也會觸發這個點選事件呢？ 這就牽扯到事件流，從上面的思考，我們知道它描述的是事件觸發順序，那上文中是按鈕和其容器元素都觸發嗎，它們誰先觸發呢？這可不是確定的，得看是哪種型別的事件流了。
1、事件冒泡（Bubbling）
事件冒泡是IE 的事件流，事件是由最具體的元素接收，然後逐級向上傳播，在每一級的節點上都會發生，直到傳播到document物件，向Chrome這樣的瀏覽器會冒泡到window 物件（很容易記憶，聯想水裡的泡泡不也這樣麼）。
2、事件捕獲（ Captrue）
事件捕獲是Netscape瀏覽器開發團隊提出的，很有意思，他們思想和IE 的截然相反。也就是說，從不具體的節點到最具體的節點，一般是從document物件開始傳播，不過很少人用事件捕獲的，還是事件冒泡用的多。
3、DOM 事件流
這裡規定的事件流有三個階段： 事件捕獲階段，目標階段，事件冒泡階段。
事件處理
1、HTML 事件
其實就是，HTML 的on屬性。
<button onclick="alert('Hello world!')">
on + 事件名，因為要執行函式，我這裡寫的doSomething()，這是會執行的程式碼，不能寫個函式名哈，要記得帶上括號。使用這個方法指定的監聽程式碼，只會在冒泡階段觸發。
2、DOM 0級事件
其實就是，元素節點的事件屬性。
element.onclick = function(){}
0級是最早的，而且目前所有的瀏覽器仍支援0級DOM模型。
缺點是一個事件的處理程式只能對應一個函式
刪除DOM0事件處理程式，只要將對應事件屬性置為null即可。
3、DOM2 級事件
記住2個方法，addEventListener()和removeEventListener()，用於新增和刪除事件處理程式。
（1）EventTarget.addEventListener()
target.addEventListener(type, listener, options); target.addEventListener(type, listener, useCapture); target.addEventListener(type, listener, useCapture, wantsUntrusted )
type表示監聽事件型別的字串。
listener當所監聽的事件型別觸發時，會接收到一個事件通知（實現了 Event介面的物件）物件。listener必須是一個實現了EventListener介面的物件，或者是一個函式。有關回調本身的詳細資訊，請參閱
options可選
一個指定有關listener 屬性的可選引數物件。可用的選項如下：
capture:Boolean，表示listener會在該型別的事件捕獲階段傳播到該EventTarget時觸發。once:Boolean，表示listener 在新增之後最多隻呼叫一次。如果是true，listener會在其被呼叫之後自動移除。passive:Boolean，設定為true時，表示listener永遠不會呼叫preventDefault()。如果 listener 仍然呼叫了這個函式，客戶端將會忽略它並丟擲一個控制檯警告。
mozSystemGroup: 只能在 XBL 或者是 Firefox' chrome 使用，這是個Boolean，表示listener被新增到 system group。
useCapture可選
Boolean，在DOM樹中，註冊了listener的元素， 是否要先於它下面的EventTarget，呼叫該listener。 當useCapture(設為true) 時，沿著DOM樹向上冒泡的事件，不會觸發listener。當一個元素嵌套了另一個元素，並且兩個元素都對同一事件註冊了一個處理函式時，所發生的事件冒泡和事件捕獲是兩種不同的事件傳播方式。事件傳播模式決定了元素以哪個順序接收事件。進一步的解釋可以檢視 事件流 及JavaScript Event order 文件。 如果沒有指定， useCapture 預設為 false 。
（2）EventTarget.removeEventListener()
target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);
type
一個字串，表示需要移除的事件型別，如"click"。
listener需要從目標事件移除的EventListener函式。
options可選一個指定事件偵聽器特徵的可選物件。可選項有：
capture: 一個Boolean表示這個型別的事件將會被派遣到已經註冊的偵聽器，然後再派遣到DOM樹中它下面的任何EventTarget。mozSystemGroup: 僅可運行於 XBL 或者 Firefox Chrome，它是一個Boolean，用於定義是否將偵聽器新增到系統組。
useCapture可選指定需要移除的EventListener函式是否為捕獲監聽器。如果無此引數，預設值為false。如果同一個監聽事件分別為“事件捕獲”和“事件冒泡”註冊了一次，這兩次事件需要分別移除。兩者不會互相干擾。移除捕獲監聽器不會影響非捕獲版本的相同監聽器，反之亦然。
4、DOM 3級事件
element.addEventListener('onmouseover',function(){},false)
//語法
element.addEventListener(event, function, useCapture)
event：事件名，字串形式，必填
function：事件處理函式，必填
useCapture：選擇事件處理函式執行的階段，布林型別，可選項，預設false即冒泡階段
3級事件的操作方式和2級事件是一樣的。
DOM3級事件模組在DOM2級事件的基礎上重新定義了這些事件，也添加了一些新事件。
包括IE9在內的主流瀏覽器都支援DOM2級事件，IE9也支援DOM3級事件。
dom對以下事件做了改動
UI事件
焦點事件
滑鼠事件
滾輪事件
文字事件
鍵盤事件
合成事件
變動事件
- 自定義事件
<body>
<div id=div1>
<button id=button1>點選觸發 frank 事件
</button>
</div>
</body>
button1.addEventListener('click', ()=>{
const event = new CustomEvent("frank", {"detail":{name:'frank', age: 18}})
button1.dispatchEvent(event)
})
button1.addEventListener('frank', (e)=>{
console.log('frank')
console.log(e)
})
5、IE 事件
（1）事件繫結監聽函式：attachEvent(eventType, listener)（2）事件移除監聽函式：detachEvent(eventType, listener)
DOM 事件機制
1、事件流
html 元素觸發事件的順序。
2、事件捕獲（從外向內）
網景的事件流叫做事件捕獲，從外向內，找監聽函式，叫事件捕獲；
3、事件冒泡（從內向外）
IE的事件流叫做事件冒泡(event bubbling)，從內向外，找監聽函式，叫事件冒泡；
4、取消冒泡
捕獲不可取消，但是冒泡可取消
e.stopPropagation() 可中斷冒泡，瀏覽器不在向上走；
補充：
<div class="outer">
<p class="inner">Click me!</p>
</div>
使用者點選p標籤，div也算被點選了，event會傳給所有的監聽函式，使用者通過設定true/false自行選擇事件處理的階段，事件結束後event消失。
target和currentTarget
上面程式碼，我們監聽div，再點選p元素，p就是e.target，div就是e.currentTarget