DIV のクリックを検出する

【実行画面】
ここをクリックして下さい
  1. 【実行画面の Source Code】
    【DIV タグです】
      <h1>DIV Click</h1>
  <div onclick= MouseClick()>ここをクリックして下さい</div>
    【呼び出される関数です】
    <script type="text/javascript">
  function MouseClick()
  {
    alert("DIV がクリックされました");
  }
</script>
  2. 「ここをクリックして下さい」をクリックすると MouseClick() 関数が呼び出されます。
  3. onclick イベントは HTML タグの多くに設定することが出来るようです。
    例えば a, body, button, div, img, table, tr, td などにも使えます。
    今回は <div> タグに onclick を設定して MouseClick() 関数を呼び出してみました。

Button を並べてクリックを検出する

  1. 【実行画面】

  2. 【実行画面の Source Code】
    <button onclick="func_1()">Button 1</button>
<button onclick="func_2()">Button 2</button>
<button onclick="func_3()">Button 3</button>

<script type="text/javascript">
function func_1()
{  window.alert("Button 1 がクリックされました");
}
function func_2()
{  window.alert("Button 2 がクリックされました");
}
function func_3()
{  window.alert("Button 3 がクリックされました");
}
</script>
  3. Button 1 ～ Button 3 をクリックしてみて下さい。
    func_1() ～ func_3() が呼び出されます。

画像 を並べてクリックを検出する

  1. 【実行画面】
  2. 【実行画面の Source Code】
    <img src="img/Enemy1.gif" onclick="img_1()">
<img src="img/Enemy2.gif" onclick="img_2()">
<img src="img/Enemy3.gif" onclick="img_3()">
<script type="text/javascript">
function img_1()
{  window.alert("Image 1 がクリックされました");
}
function img_2()
{  window.alert("Image 2 がクリックされました");
}
function img_3()
{  window.alert("Image 3 がクリックされました");
}
</script>
  3. 三枚の画像を並べて onclick を設定してみました。
    画像をクリックすると img_1() ～ img_3() が呼び出されます。

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)