GlobalEventHandlers.onclick

onclick は GlobalEventHandlers ミックスインのプロパティで、指定された要素の click イベントを処理するためのイベントハンドラーです。

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

functionRef は、関数名または関数式です。この関数は、MouseEvent オブジェクトを唯一の引数として受け取ります。関数内では、 this は onclick が結びつけられたオブジェクトになります (event.currentTarget にも一致します)。

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

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

HTML

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

JavaScript

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

   document.getElementById('demo').textContent = "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 (en-US)
  • GlobalEventHandlers.ondblclick (en-US)