click

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

clickの基本的な使い方

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

以下は、利用例です。

【click利用例】

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

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

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

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

ここをクリックします。

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

フォームでの利用例

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

【フォームでの利用例】

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

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

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

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

画像での利用例

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

【img要素での利用例】

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

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

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

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

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

ブラウザのサポート状況

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

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

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

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

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

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

「イベントリスナー一覧」に戻る