20k的前端是這樣寫事件委托的

要了解​<code>​DOM​</code>​相關事件，我們先要了解​<code>​“事件流”​</code>​這個概念，事件流描述的是從頁面中接收事件的順序。

事件冒泡：事件開始由最具體的元素接收，然後逐級向上傳播到較為不具體的節點或文檔。

事件捕獲：事件開始由不太具體的節點接收，然後逐級向下傳播到最具體的節點。它與事件冒泡是個相反的過程。

​<code>​DOM2​</code>​ 級事件規定的事件流包括三個階段：事件捕獲、目标階段、事件冒泡。

文章轉載：樂位元組

事件委托，通俗的說就是将元素的事件委托給它的父級或者更外級的元素處理，它的實作機制就是事件冒泡。

假設有一個清單，要求點選清單項彈出對應的字段：

存在問題：

給每一個清單都綁定事件，消耗記憶體

當有動态添加的元素時，需要重新給元素綁定事件

事實上很多同學在網上看到的事件委托的方法都是錯的，雖然是錯的，但是你面試的時候也可能會過，因為面你的面試官可能也不知道正确的事件委托應該怎麼寫。

下面我們就來看一下錯誤版的事件委托是怎麼寫的：

錯誤版事件委托的​<code>​bug​</code>​ 在于，如果使用者點選的是 ​<code>​li​</code>​裡面的 ​<code>​span​</code>​，就沒法觸發 ​<code>​fn​</code>​，這顯然不對。

那下面我們來看一下正确的事件委托應該怎麼寫：

思路是點選 ​<code>​span​</code>​後，遞歸周遊 ​<code>​span​</code>​ 的祖先元素看其中有沒有 ​<code>​ul​</code>​ 裡面的 ​<code>​li​</code>​。

事件委托的優點

隻需要将同類元素的事件委托給父級或者更外級的元素，不需要給所有的元素都綁定事件，減少記憶體占用空間，提升性能。

動态新增的元素無需重新綁定事件

需要注意的點

事件委托的實作依靠的冒泡，是以不支援事件冒泡的事件就不适合使用事件委托。

不是所有的事件綁定都适合使用事件委托，不恰當使用反而可能導緻不需要綁定事件的元素也被綁定上了事件。

告誡自己，即使再累也不要忘記學習，成功沒有捷徑可走，隻有一步接着一步走下去。 共勉！

文章中如有不對的地方，歡迎小夥伴們多多指正。

謝謝大家~ 💘

哈喽，在學程式設計，學Java的小夥伴們，一個人摸黑學會很難，up也是過來人，歡迎大家加入我的一個Java交流裙：​​ ​933873310​​​ 暗号：75 這裡給大家準備了配套視訊、書籍等學習資源，還有接單技巧