語境：
- 帶有多行多列的長表的 HTML。
- 每個單元格包含附加元素和子元素。
- 在每一行的最后一個單元格中，每行不同的按鈕但相同
題：
在此設定中，瀏覽器的資源方面（流暢性、加載時間、回應能力等）最好：
- 在
<table>元素上使用單個委托單擊處理程式？這將通過單擊任何其他單元格或子元素來觸發，并且基本上沒有觸發更多次。 <button>在每一行上使用事件處理程式？這將添加許多處理程式，但每個處理程式僅在需要時運行一次。- 替代 ？
瀏覽器本身有真正的區別嗎？（讓我們不要考慮編碼實踐）
在 (1) 委托情況下，瀏覽器是否必須在某種程度上向每個子元素添加偵聽器才能知道它已被單擊？
uj5u.com熱心網友回復：
在您描述的情況下，事件委托的主要性能優勢是
你只需要連接一個處理程式一次，而不是遍歷所有行來完成它。但是，如果您有一個如此大的表，以至于將處理程式連接到按鈕是一個緩慢的操作，那么您可能會遇到該表的其他性能問題。
一個小的節省記憶體（事件注冊）。
如果它是click處理程式，則無需擔心性能劣勢。（例如，mousemove處理程式可能不是這樣。）
需要考慮代碼復雜性和維護問題（委托處理程式撰寫起來稍微復雜一些；如果按鈕是在某個時候動態添加的，將處理程式連接到每個按鈕更容易出錯），但是您已經說過您主要是關心性能。
在 (1) 委托情況下，瀏覽器是否必須在某種程度上向每個子元素添加偵聽器才能知道它已被單擊？
不，只有一個事件偵聽器。會發生什么是點擊氣泡。這是舊的
處理程式僅附加到一個元素。當點擊氣泡（傳播）到該元素時會發現它。
- 在
<table>元素上使用單個委托單擊處理程式？這將通過單擊任何其他單元格或子元素來觸發，并且基本上沒有觸發更多次。
這是真的，但它是無害的。所需的作業量幾乎為零。
<button>在每一行上使用事件處理程式？這將添加許多處理程式，但每個處理程式僅在需要時運行一次。
您不需要很多處理程式，您可以對多個按鈕重復使用相同的功能。這只是處理程式的多個注冊：
function buttonHandler(event) {
// ...
}
// ...
for (const btn of document.querySelectorAll(".selector-for-button")) {
btn.addEventListener("click", buttonHandler); // Adds a registration, not
// an additional function
}
That doesn't create a new function for each button, it reuses the same function for all of the buttons. During the call, event.currentTarget will refer to the specific button that was clicked (the one we hooked up the handler to). (If the button has child elements, event.target may refer to one of those children, but event.currentTarget will refer to the button.)
So in any given situation, you have to weigh those various considerations to decide what you want to do.
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/323495.html
標籤：javascript 表现 dom事件