GlobalEventHandlers.onclick

onclick は GlobalEventHandlers ミックスインのプロパティで、所与の要素の click イベントを処理するためのイベントハンドラー (EventHandler) です。

click イベントは、ユーザーが要素をクリックしたときに発生します。 mousedown イベントと mouseup イベントの後に、この順番で発行されます。

構文

target.onclick = functionRef;

値

functionRef は、関数名または関数式です。 この関数は、MouseEvent オブジェクトを唯一の引数として受け取ります。関数内では、 this はイベントが発行された要素になります。

一度に1つのオブジェクトに割り当てることができる onclick ハンドラは1つだけです。より柔軟性のある EventTarget.addEventListener() メソッドを使用することをお勧めします。

例

クリックの検出

この例では、要素の上でクリックが行われたときに要素の色を単純に変更します。

HTML

<div id="demo">ここをクリック</div>

JavaScript

document.getElementById('demo').onclick = function changeContent() {

   document.getElementById('demo').innerHTML = "Help me";
   document.getElementById('demo').style = "Color: red";

}

結果

クリックの座標の取得

この例では、最も新しくマウスボタンのクリックが行われた場所の座標を表示します。

HTML

<p>この例のどこかをクリックしてください。</p>
<p id="log"></p>

JavaScript

let log = document.getElementById('log');

document.onclick = inputChange;

function inputChange(e) {
  log.textContent = `位置: (${e.clientX}, ${e.clientY})`;
}

結果

仕様書

ブラウザーの互換性

関連情報

• click イベント
• 関連イベントハンドラー
  • GlobalEventHandlers.onauxclick
  • GlobalEventHandlers.ondblclick