onclick

イベントハンドラのonclickについて、サンプルコードを示しながら使い方を説明しています。

onclickの基本的な使い方

イベントハンドラのonclickは、ページや要素内でマウスが左クリックされた時に処理を実行できます。

以下は、利用例です。

【onclick利用例】

<div id="test-click">
ここをクリックします。
</div>

<script>
const x = document.querySelector("#test-click");
x.onclick = function(){alert("テストです");};
</script>

赤字部分でclickイベントを登録しています。

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

ここをクリックします。

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

フォームでの利用例

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

【フォームでの利用例】

<form>
<button type="button" id="test-click">表示</button>
</form>

<script>
const x = document.querySelector("#test-click");
x.onclick = function(){alert("テストです");};
</script>

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

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

画像での利用例

onclickはimg要素でも使えます。

【img要素での利用例】

<img src="image.png" alt="画像" id="test-click">

<script>
const x = document.querySelector("#test-click");
x.onclick = function(){alert("テストです");};
</script>

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

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

この他、<html>で使うとページのどこをクリックしてもイベントにできます。例えば、背景をクリックしてもイベントになります。

HTMLの属性として記述する(非推奨)

onclickは、HTMLの属性としても記述できます。

【onclickをHTML属性で記述する例】

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

divタグで、onclick属性によってalertを実行しています。これでも、同じ動作をします。

属性で記述する方法は、以前は多く使われていましたが、今では非推奨になっています。新しくスクリプトを作る時は、これまで説明したプロパティで記述するか、イベントリスナーを使って記述がお薦めです。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目	IE	Ed	Fx	Ch	Sa	Op
onclick	〇	〇	〇	〇	〇	？

【スマートフォン】
項目	Sa	An	Op	Ch	Fx	Sm
onclick	〇	〇	？	〇	〇	〇

〇: サポート
△: 制限あり
×: 未サポート
？: 不明

IE: Internet Explorer
Ed: Edge
Fx: Firefox
Ch: Chrome
Sa: Safari
Op: Opera
An: Android Browser
Sm: Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

「イベントハンドラ一覧」に戻る