Какой самый эффективный способ обработки EventListeners? - PullRequest
0 голосов
/ 08 ноября 2018

Я написал следующий код:

document.addEventListener('click', function (event) {
       if(event.target.matches('#open-new-not') || event.target.matches('#close-not')){
            opnNewNot();
       }
       if(event.target-matcheS('#hide-links')){
            hideLinks();
       }
       if(...and so on...){}
});

Это хорошее решение? Не могли бы вы посоветовать, как я могу обработать почти все списки событий самым простым и эффективным способом? Большое спасибо.

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Поскольку вы сопоставляете только идентификаторы, нет смысла использовать делегирование событий (если элементы не загружаются лениво). Просто установите прослушиватели событий на сами элементы, не используйте здесь большую цепочку if / else. Делегирование событий только повышает эффективность обработки событий на многих похожих элементах.

0 голосов
/ 08 ноября 2018

Если вам абсолютно необходимо пойти по этому пути, тогда я предлагаю вам использовать оператор switch вместо строки if s. Это дает дополнительное преимущество: не прерывайте обработку других событий, которые вы не пытаетесь перехватить.

document.addEventListener('click', function (event) {
    switch (event.target.id) {
        case 'open-new-not':
        case 'close-not':
            openNewNot();
            break;
        case 'hide-links':
            hideLinks();
            break;
        // etc
    }
});

Если бы я был вами, я бы серьезно подумал, хочу ли я регистрировать каждое click событие для каждого элемента или смогу ли я реально сойти с рук при нацеливании только на несколько выбранных элементов.

...