（今回は怪獣八号ネタです。）
本編を進めていくと、やっぱり「ここ、理解が足りてないな」と思うところがあります。
今回はevent.targetです。
あっさり行ける人もいるんでしょうけど、タイトルの通り私は理解が遅いのでここで一旦備忘録の記事を挿入することにします。
私はいちいち「ターゲット」と書かないといけない理由が分かっていませんでした。
例えば、HTMLのページにAとBとCのボタンがあったとします。
Bを押したら、「Bを押したんだからターゲットなんかつけなくてもBに決まってるだろ。なんでそこからさらにターゲットなんて指定しないといけないんだ」と、そういう認識でした。
自分の疑問を言葉にするのがちょっと難しかったのですが、いろいろ考えてみたところ、自分が分からなかったのはこういう感じなんだろうと思います。
なのでここできっちり片を付けようと思います。
event.target
ChatGPT先生に教えてもらうとevent.targetを付ける理由は単純でした。
まあそれでも腑に落ちるまでには時間がかかりましたが。
おそらくプログラミング学校とかで質問したらぶち切れされるくらい質問をしまくりました。
targetを付ける理由は、先ほどAとBとCのボタンのうち、Bを押したらBとわかるだろと思っていましたが、そうじゃありませんでした。
例えば以下のような場合。
HTML
<div id="candidateList"> <button>日比野カフカ</button> <button>市川レノ</button> <button>亜白ミナ</button> <button>保科宗四郎</button> </div> <p id="log"></p>
const candidateList = document.getElementById('candidateList'); const log = document.getElementById('log'); candidateList.addEventListener('click', (event) => { // 押された「要素そのもの」 const clickedElement = event.target; //targetが出てくるところ // ボタン以外は無視 if (clickedElement.tagName !== 'BUTTON') return; log.textContent = `${clickedElement.textContent} を押しました`; });
これで仮にtargetを抜いたとします。
そうするとaddEventListenerのclickで、クリックしたことは伝わるのですが、いったいどこをクリックしたのかまでは伝わらないんです。
これが最初の骨組みであるHTMLのままであれば、順番とかが変わることがないので問題がないこともあります。
しかし基本的にJavaScriptではHTMLをDOM操作します。
つまりHTMLをいじくりまくるわけです。
そうなると、event.targetを使わなければ、いったいどのボタンを指しているのかがわからなくなるんです。
とくにこの掲示板では配列を作り、その配列を常に送信してDOM操作をしますので、targetは必須ということになります。
どうやってtargetの先を決めているのか
さて、私が抱いた次の疑問は、ボタンが「日比野カフカ」と「市川レノ」と「亜白ミナ」と「保科宗四郎」があった場合、どうやってtargetの先を決めているのか、ということでした。
だって、どのボタンを押してもJavaScriptが認識するのは「クリックされた」ということだけなんですし。
それで同じようにevent.targetと書いたところで「どこをターゲットにしてるんだよ」と思いました。
その答えはイベントオブジェクトにありました。
さっきからevent.targetと書いてるのの左側のeventのところです。
ボタンをクリックすると同時に、イベントオブジェクトが作成されます。
このイベントオブジェクトには、DOM操作したHTMLからの情報がブラウザから送信されます。
つまり、たとえば保科宗四郎のボタンを押したのであれば、「保科宗四郎のボタンを押した場合のイベントオブジェクト」が作成されるんです。
従って、イベントオブジェクトの中に「保科宗四郎を押した」という情報が含まれています。
具体的には以下のように。
event = { type: "click", target: <button>保科宗四郎</button>, //event.target currentTarget: <div id="candidateList">...</div>, timeStamp: 123456.78, bubbles: true, cancelable: true, defaultPrevented: false }
見てのとおり、プロパティの中にtargetが入ってます。
つまり保科宗四郎のボタンを押した場合、イベントオブジェクトのプロパティであるevent.targetは「保科宗四郎」というボタンそのものということになります。
で、ボタンそのものですから<button>と同じ意味になり、event.targetはDOM要素ということになります。
しつこいですが、event.targetは<button>ですので、event.target.tagNameまたはclickedElement.tagNameはBUTTONになります。
なぜか大文字になりますが、これは仕様だそうです。
おわりに
今回はevent.targetについてでした。
eventと書かずeだけのときもありますが、イベントオブジェクトであることはすぐにわかるので問題はないかと思います。
いずれにしてもこれでtargetの役割と、なぜそれが必要なのかが理解できたと思います。
これでやっと本編に戻れます。
