Vanilla JavaScript 中的事件委託:綜合指南
在vanilla JavaScript 中實現事件委託提供了一種高效且可維護的方式來處理事件偵聽器。與涉及修改內建原型的 jQuery 事件委託不同,vanilla JavaScript 透過使用「.closest()」事件委託提供了更強大的方法。
將jQuery 事件委託翻譯為Vanilla JavaScript
將jQuery 範例:
1 2 3 | $( '#main' ).on( 'click' , '.focused' , function (){
settingsPanel();
});
|
登入後複製
翻譯成普通版本JavaScript,我們使用:
1 2 3 4 5 | document.querySelector( '#main' ).addEventListener( 'click' , (e) => {
if (e.target.closest( '.focused' )) {
settingsPanel();
}
});
|
登入後複製
翻譯成普通版本JavaScript,我們使用:
翻譯成普通版本JavaScript,我們使用:
'.closest()'方法檢查單擊的元素是否具有與 '.focused' 選擇器相符的父元素。如果是這樣,它會呼叫“settingsPanel()”函數。
1 2 3 4 5 6 | document.querySelector( '#main' ).addEventListener( 'click' , (e) => {
if (!e.target.closest( '.focused' )) {
return ;
}
});
|
登入後複製
複雜事件鏈的最佳化
為了提高效能,特別是在處理巢狀元素時,請考慮使用提前回傳:
當“.focused”選擇器不存在時,這種方法可以防止不必要的程式碼執行匹配。
1 2 3 4 5 6 7 8 9 10 | document.querySelector( '#outer' ).addEventListener( 'click' , (e) => {
if (!e.target.closest( '#inner' )) {
return ;
}
console.log( 'vanilla' );
});
$( '#outer' ).on( 'click' , '#inner' , () => {
console.log( 'jQuery' );
});
|
登入後複製
現場示範以下程式碼片段顯示如何使用原生JavaScript 的事件委託與'.closest()':在此範例中,按一下「#inner」元素會將「vanilla」記錄到控制台,示範vanilla JavaScript 的事件代表團。
以上是如何在 Vanilla JavaScript 中有效實現事件委託?的詳細內容。更多資訊請關注PHP中文網其他相關文章!