【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