Q&A
テーマ、知りたいこと
JavaScript のaddEventListener
は
・その都度書きますか?
・中で分岐しますか?
具体的に(SurferOnWww様の表現をお借りして)次のような意味になります。
JavaScript で addEventListener を使ってリスナをアタッチする際、イベントが発生する要素に直接リスナをアタッチした方が良いのか、その要素の親の要素(例えば document)にアタッチしてキャプチャリングとかバブリングで捕捉した方が良いのか?
背景、状況
jQuery は少し書けるのですが、Vanilla JS 化に取り組んでいます。
そこでaddEventListener
の使い方について、どちらがいつ良いのかがわかりません。
広くご意見頂戴できましたら幸いです。
以下にサンプルケースを挙げてみましたが、他に「こういうケースではこっちの方が良いよ」とか「こういうケースではこっちは使いにくいよ」などより具体的に何かございましたらご教示頂きたく存じます。
何卒宜しくお願い申し上げます。
サンプル
その都度書く
JavaScript
1var btn1 = document.getElementById('btn1'); 2btn1.addEventListener('click', function() { 3 console.log('#btn1をクリックしました'); 4}, false); 5 6var btn2 = document.getElementById('btn2'); 7btn2.addEventListener('click', function() { 8 console.log('#btn2をクリックしました'); 9}, false);
中で分岐する
JavaScript
1document.addEventListener('click', function(evt) { 2 if ( evt.target.id === 'btn1' ) { 3 console.log('#btn1をクリックしました'); 4 } else if( evt.target.id === 'btn2' ) { 5 console.log('#btn2をクリックしました'); 6 } 7}, false);
回答3件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。