画像をクリックしたときにJavaScriptを実行させる方法を教えてください

Question

前提・実現したいこと

html5の中に表示されている画像をクリックすると、
javascriptが実行され、
何らかの処理をするコードを知りたいです。

よろしくお願い致します。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[x_x]

画像と言ってもimg要素なのかcanvas要素なのかsvgなのか、あるいはスタイルシートで定義した背景画像なのか等々いろいろと考えられると思いますが、どれの話でしょうか？

Answer 1

ブラウザ操作はすべてイベントによって支配されています。これはオンラインアプリに限った話ではなく、普通のExcelなどのソフトウェアでも同じです。マウスなどのイベント → トリガー → 処理内容という流れになります。トリガー部分はあらかじめイベントリスナーを追加しておくことで実現できます。

トリガーは拳銃のトリガーと一緒の意味で、よく発火（fire）などと言われます。直接的な日本語訳はありませんが、拳銃のトリガーを思い浮かべればわかりやすいかと思います。

イベントリスナー

指定の要素に指定のイベントが発生したら、何かの処理を行うという処理定義をあらかじめ設定しておきます。この設定は任意の要素に追加することができて、しかも重複イベントも登録可能です。重複している場合は、登録順にイベント処理が実行されます。途中で以降のイベントを中断するようにすることも可能です。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

document.getElementById('指定要素のID名').addEventListener('イベントタイプ', function(e) {
    //なんらかの処理内容
    //下記デバッグ
    //console.log('EVENT:'+ e, ', TYPE:'+ e.type, ', ELEMENT:'+ e.target);
}, false);

上記document.getElementById('指定要素のID名')が 要素を指定している部分 で、document.querySelector('CSSセレクタ')としても同じです。
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

イベントにはいろいろありデバイスによっても違います。よく使われるイベントタイプはclick, change, inputなどです。他にもいろいろあり、マウスをクリックし始めたなどのイベントも取得可能です。詳しくは下記を参照してください。
https://developer.mozilla.org/ja/docs/Web/API/Event

Answer 2

その質問の仕方だと、

<img src="https://placehold.jp/150x150.png" onclick="alert('何らかの処理');" />

こんなワンライナーですら回答になり得てしまうのですが、

もっと、「クリックでこういうことがしたい」みたいな願望などはないのでしょうか？

Comments

[退会済みユーザー]

ありがとうございます。
具体的には、画像をクリックすると、画像情報をサイトやアプリへ送りたいということでご質問させていただいたのですが、回答を得られずこのような質問になってしまいまして申し訳ございませんが、
もしお分かりになりましたらご教授いただけると助かります。
どうぞよろしくお願い致します。

[namnium1125]

クローズせずに質問本文に追記するか(この場合私へのBAは外してください。)、別に質問し直すべきだと思いますよ。また画像情報が具体的に何かわからないので、明記していただけると幸いです。

Answer 3

こんな感じです

<script>
document.addEventListener('click',function(e){
  var t=e.target;
  if(t.nodeName=="IMG"){
    console.log(t.id);
  }
});
</script>

<img id="img1" alt="img1">
<img id="img2" alt="img2">
<img id="img3" alt="img3">