首頁 > web前端 > js教程 > 如何在 Vanilla JavaScript 中有效實現事件委託?

如何在 Vanilla JavaScript 中有效實現事件委託?

DDD
發布: 2024-11-24 08:25:10
原創
283 人瀏覽過

How Can I Effectively Implement Event Delegation in Vanilla JavaScript?

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;

  }

  // code of settingsPanel here, if it isn't too long

});

登入後複製

複雜事件鏈的最佳化

為了提高效能,特別是在處理巢狀元素時,請考慮使用提前回傳:

當“.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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板