Dom事件流的順序?什么是事件委托?

　　在前端中，DOM事件流描述了事件在文檔對象模型(DOM)中的傳播順序。它包括以下三個階段：

　　1.捕獲階段(Capture Phase)

　　事件從文檔根節(jié)點(diǎn)一直向下傳播到目標(biāo)元素的過程。在這個階段，事件會依次經(jīng)過文檔根節(jié)點(diǎn)、父節(jié)點(diǎn)，直到達(dá)到目標(biāo)元素。

　　2.目標(biāo)階段(Target Phase)

　　事件已經(jīng)達(dá)到目標(biāo)元素。在這個階段，事件會在目標(biāo)元素上觸發(fā)。

　　3.冒泡階段(Bubbling Phase)

　　事件從目標(biāo)元素開始向上傳播回到文檔根節(jié)點(diǎn)的過程。在這個階段，事件會依次經(jīng)過目標(biāo)元素的父節(jié)點(diǎn)，直到達(dá)到文檔根節(jié)點(diǎn)。

　　事件委托(Event delegation)是一種利用事件冒泡機(jī)制的技術(shù)。它通過將事件處理程序綁定到一個父元素上，然后利用事件冒泡的特性，來處理子元素上觸發(fā)的事件。具體來說，當(dāng)子元素觸發(fā)事件時，事件會冒泡到父元素，然后父元素上綁定的事件處理程序會被觸發(fā)。

　　事件委托的好處是可以減少事件處理程序的數(shù)量，提高性能和內(nèi)存管理。相比于在每個子元素上都綁定事件處理程序，將事件處理程序綁定到父元素上可以簡化代碼，并且對于動態(tài)添加或移除的子元素也能正常工作，而無需重新綁定事件處理程序。

　　接下來我們看兩段代碼演示，具體展示了事件委托的概念：

　　HTML部分：

<ul id="parent-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

　　JavaScript部分：

// 獲取父元素
var parentList = document.getElementById('parent-list');

// 添加事件監(jiān)聽器到父元素上
parentList.addEventListener('click', function(event) {
  // 檢查被點(diǎn)擊的元素是否為列表項(xiàng)
  if (event.target.nodeName === 'LI') {
    // 輸出被點(diǎn)擊的列表項(xiàng)的文本內(nèi)容
    console.log(event.target.textContent);
  }
});

　　在上述代碼中，我們將事件監(jiān)聽器綁定到父元素ul上，而不是每個列表項(xiàng)li上。當(dāng)點(diǎn)擊列表項(xiàng)時，事件會冒泡到父元素，并被父元素上的事件監(jiān)聽器捕獲到。然后我們檢查被點(diǎn)擊的元素是否為列表項(xiàng)，并輸出其文本內(nèi)容。

　　總結(jié)一下，DOM事件流按照捕獲階段、目標(biāo)階段和冒泡階段的順序傳播事件。事件委托是一種利用事件冒泡機(jī)制，在父元素上綁定事件處理程序來處理子元素上觸發(fā)的事件的技術(shù)。