tamakipedia

かまくらぴよぴよフロントエンジニア

【javascript】targetプロパティーでクリックした要素の情報を取得する

クリック先の情報を取得する target プロパティーの使い方です。

同じイベントを呼び出すコードが複数あったときに、
一つの関数で条件に応じた処理ができるの便利です。

   <body>
   <h1 id="title">イベントのtargetプロパティを使う</h1>
   <button id="button" type="button" data-new-Word="こんにちは">昼</button><br>
   <button id="button2" type="button" data-new-Word="こんばんは">夜</button>    
   <script>
       var button = document.getElementById('button');
       var button2 = document.getElementById('button2');
       
       button.addEventListener('click',changeTitle);
       button2.addEventListener('click',changeTitle);
       
       function changeTitle(event) {
           var button = event.target;  //buttonの要素を取得する
           button.textContent = button.dataset.newWord;
       }
   </script>       
   </body>

ちなみに event.target をconsole.logで吐き出すと

"<button id='button2' type='button' data-new-word='こんばんは'>夜</button>"

   <button id="button" type="button" data-new-Word="こんにちは">昼</button>

このどちらかの要素を吐き出します。

普段はonClickとthisを組み合わせてどうにかこじつけていたので助かりました。

参考
https://developer.mozilla.org/ja/docs/Web/API/Event/target