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>

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

スペードA

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

この他、<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版です。