GlobalEventHandlers.onclick
onclick
は GlobalEventHandlers
ミックスインのプロパティで、指定された要素の click
イベントを処理するためのイベントハンドラーです。
click
イベントは、ユーザーが要素をクリックしたときに発行されます。 mousedown
イベントと mouseup
イベントの後に、この順番で発行されます。
注:
click
イベントを使用してアクションを起動するときは、マウスやタッチ画面を使用していないユーザーが同じアクションを使用できるように、 keydown
(en-US) イベントにも同じアクションを追加することを検討してください。構文
target.onclick = functionRef;
値
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})`;
}
結果
仕様書
Specification |
---|
HTML Standard # handler-onclick |
ブラウザーの互換性
BCD tables only load in the browser