マウスがクリックされたときに実行するスクリプトを記述します。onclick属性は省略可能です。

onmouseupとの違い

onclickとよく似たイベントでonmouseupイベントがあります。

どちらもマウスボタンを離したときに起こるイベントですが、onclickはボタンを押した要素でボタンを離したときに起こるイベントです。

これに対して、onmouseupはボタンをどこで押したかに関わらず、ボタンを離した場所で発生するイベントです。ほかの場所でボタンを押し、そのままマウスカーソルを動かして別の場所でボタンを離すと、onmouseupイベントのみが発生します。

onclick属性の分類
バージョン 分類
HTML 4.01 Transitional イベント属性
HTML 4.01 Strict イベント属性
XHTML 1.0 Strict イベント属性

使用例

次にonclick属性の使用例を示します。

<button onclick="alert('onclick イベントが発生しました。')">クリック</button>

次にonclick属性の表示サンプルを示します。表示結果はブラウザによって異なることがあります。

イベントリスナー

onclick属性を使わずに、イベントリスナーを使ってイベント処理を行うこともできます。

<button type="button" id="btn">
  Button
</button>
<p>
  Event: <span id="evnt"></span>
</p>
<script>
  e = document.getElementById("btn");
  e.addEventListener("click", function(){
    document.getElementById("evnt").innerHTML = "mousedown";
  });
  e.addEventListener("dblclick", function(){
    document.getElementById("evnt").innerHTML = "dblclick";
  });
</script>

Event: