在jQuery 中，可以使用以下程式碼實現事件委託：
$('#main').on('click', '.focused', function() {
settingsPanel();
});在普通 JavaScript 中利用事件委託可以透過 addEventListener 來實現。然而，優化該方法以提高效率非常重要。考慮以下替代方案：
document.querySelector('#main').addEventListener('click', (e) => {
if (e.target.closest('.focused')) {
settingsPanel();
}
});利用closest()，我們檢查單擊的元素或其任何祖先是否與.focused選擇器匹配。這消除了低效迭代子元素的需要。
為了增強程式碼緊湊性，主要邏輯可以放在早期回傳語句的下面：
document.querySelector('#main').addEventListener('click', (e) => {
if (!e.target.closest('.focused')) {
return;
}
// Code of settingsPanel here
});以下程式碼示範了方法：
document.querySelector('#outer').addEventListener('click', (e) => {
if (!e.target.closest('#inner')) {
return;
}
console.log('vanilla');
});
$('#outer').on('click', '#inner', () => {
console.log('jQuery');
});使用普通JavaScript 和jQuery事件處理程序與元素互動時觀察輸出。
以上是Vanilla JavaScript 事件委託與 jQuery 的最佳效能方法相比如何？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
