onclick/JavaScript

イベントハンドラのonclickについて説明します。

onclickの使い方

　onclickは、ページや要素内でマウスが左クリックされた時に処理を実行出来ます。

　以下は、例です。

【onclick利用例】

<div onclick="alert('テストです');">
ここをクリックします。
</div>

　実行例は、以下の通りです。尚、分かり易いように枠を付けています。

ここをクリックします。

　要素内でマウスをクリックすると、アラートが表示されます。

　onclickで良く使われるのは、フォーム内のボタンをクリックした時に処理を実行する方法です。

【フォームでの利用例】

<form>
<button type="button" onclick="alert('テストです');">表示</button>
</form>

　実行例は、以下の通りです。

　「表示」ボタンをクリックすると、アラートが表示されます。

　onclickは<img>でも使えます。

【imgタグでの利用例】

<img src="11.png" alt="スペードA" onclick="alert('テストです');" />

　実行例は、以下の通りです。

　画像をクリックすると、アラートが表示されます。

　この他、<html>で使うとページのどこをクリックしてもイベントに出来ます。例えば、背景(文字等が記述されていない範囲)をクリックしてもイベントになります。

・サポートするブラウザ

　以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。

・サポートするタグ

　<br>や<iframe>等を除いた多くのタグでサポートされています。