HTML onclick attribute

マウスがクリックされたときに実行するスクリプトを記述します。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要素へと伝播していく。

もし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:

関連記事

class

dir

id

lang

onblur

onchange

oncontextmenu

ondblclick

onfocus

onkeydown

onkeypress

onkeyup

onmousedown

onmousemove

onmouseout

onmouseover

onmouseup

onselect

style

title

参考文献

Web Hypertext Application Technology Working Group (2022) "Web application APIs" HTML Living Standard

World Wide Web Consortium (2021) UI Events