HTML の onclick 属性

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

構文

<tag onclick="javascript">

onclick属性で関数を呼び出す場合、第1引数にイベント・オブジェクトを渡すことができる。

<tag onclick="func(arguments[0])">

onclick属性で関数を呼び出す場合、第2引数にエレメント・オブジェクトを渡すことができる。

<tag onclick="func(arguments[0], this)">

onmouseupとの違い

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

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

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

使用例

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

<div id="d1"
     style="border: 1px solid black; height: 50px; user-select: none"
     onclick="onClick('d1')"
     onmousedown="onMouseDown('d1')"
     onmouseout="onMouseOut('d1')"
     onmouseover="onMouseOver('d1')">
</div>
<div id="d2"
     style="border: 1px solid black; height: 50px; user-select: none"
     onclick="onClick('d2')"
     onmousedown="onMouseDown('d2')"
     onmouseout="onMouseOut('d2')"
     onmouseover="onMouseOver('d2')">
</div>
<script>
  function onClick(id) {
    document.getElementById(id).innerHTML = "onclick"
  }
  function onMouseDown(id) {
    document.getElementById(id).innerHTML = "onmousedown"
  }
  function onMouseOut(id) {
    document.getElementById(id).innerHTML = "onmouseout"
  }
  function onMouseOver(id) {
    document.getElementById(id).innerHTML = "onmouseover"
  }
</script>

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

要素

次に示すイベント・ハンドラ・コンテンツ属性は、任意のHTML要素に指定することができる。

バブリング

clickイベントはバブリング（下位の要素から上位の要素へ伝播）する。

HTMLが次に示す構造である場合、input要素で発生したclickイベントは、fieldset、form、body及びhtml要素へと伝播していく。

html
- body
  - form
    - fieldset
      - input

もしfieldset、form、body及びhtml要素にonclick属性を指定した場合、それらのJavaScriptも実行される。

イベントリスナー

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 = "click";
  });
</script>

Event: