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版です。
「イベントリスナー一覧」に戻る