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