.onclick

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onclick

現在の要素上のonClickイベントハンドラのコードを返します。また、現在の要素に対してonClickイベントハンドラの関数を割り当てます。

注意: onclickイベントを使用してアクションをトリガする場合、マウスまたはタッチスクリーンを使用しないユーザーであっても、同じ事が出来るように、同じアクションに対してonkeydownイベントを追加することも考慮する必要があります。

文法

element.onclick = functionRef;

functionRefには定義されている関数名、または無名関数を指定します。詳細については、JavaScript Guide:Functionsを参照してください。

例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>onclick event example</title>
<script>
function initElement() {
  var p = document.getElementById("foo");
  // 注意: showAlert();またはshowAlert(param);は、ここでは動作しません。
  // 関数の呼び出しでは無く、関数の参照にしなければいけません。
  p.onclick = showAlert;
};

function showAlert() {
  alert("onclickイベントを検知!")
}
</script>
<style>
#foo {
  border: solid blue 2px;
}
</style>
</head>
<body onload="initElement()";>
<span id="foo">My Event Element</span>
<p>この上の要素をクリックしてください。</p>
</body>
</html>

また、下記のように無名関数を使用することも可能です。

p.onclick = function() { alert("onclickイベントを検知!"); };

注意事項

ユーザーが要素上でクリック操作を行った際に、clickイベントが発生します。クリックイベントはmousedownとmouseupイベントの後に発生します。

このプロパティを使用して、オブジェクトへ一度に割り当てられることが出来るonclickハンドラは1つだけです。代わりに、より融通が効きDOM Event仕様の一部であるEventTarget.addEventListener()メソッドを使用するのが良いかもしれません。

仕様

Defined in HTML5. FIXME:

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

特定のブラウザに特化しすぎている情報やあまりにも古い情報、または試験的に導入されているようなAPIや機能については、省略していることがあります。
例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。