多くのイベントリスナーを追加する適切な方法

Question

私はしばしば、自分のサイト内のもの（ヘッダーメニュー、サイドバーメニュー、いくつかのボタン、いくつかのトグルなど）に一連のイベントリスナーを追加します。ページ上で操作しているイベントリスナーの全体の束になる可能性があります。

は、私はいつもこの種のものの操作を行います。

// all of our menu items 
var menuItems = document.querySelectorAll('.primary-nav a'); 

// loop over them 
_.each (menuItems, function(item){ 
    // add event listener to each 
    item.addEventListener('click', function(){ 
     console.log(item); 
    }); 
}); 

ので、特定のサイト上で、私はブロックのこれらの種類の4-5を持っているかもしれません。これらのすべてのリスナーをそこに置く方が良いですか、ドキュメントを聴き、何らかのクラス/属性フィルタリングを採用する方が良いでしょうか？そのよう

：

document.addEventListener('click', function(e){ 
    if (e.target.closest('li').classList.contains('primary-nav')) { 
     // We have a primary nav item, do something with it 
    } 

    if (e.target.closest('li').classList.contains('mobile-menu-toggle')) { 
     // function for toggling open the mobile menu 
    } 
}); 

アドバイス大歓迎！

Answer 1

によって異なります。あなたの最初の例は、より演奏的であり、非常にきれいなやり方で、それを求めるだけです。 2つ目の例は、DOMの構造が変わってもイベントリスナーを再追加したくない場合は、「最も近い」メソッドはありませんが、不完全であると言われています。

primary-navまたはmobile-menu-toggleを追加する場合は、1つのルートリスナーを使用すると、要素の追加/削除時にもリスナーを変更する必要がありません。

$('body').on('click', '.primary-nav',() => { 
    .. 
}); 

同様に、リスナーがbodyに追加されますが、唯一の.primary-navセレクタマッチャに応答：jQueryのようなフレームワークは、このような構文を持つこの種のものを可能にします。ページの動的な性質に基づいて意味をなす場合にのみ、これを使用してください。そうでなければ、 "クリック"リスナーは大きなページでかなり複雑になります。