イベントリスナーのclickについて説明します。
clickは、ページや要素内でマウスが左クリックされた時に処理を実行出来ます。
以下は、例です。
<div id="test-click1">
ここをクリックします。
</div>
<script>
var x1 = document.getElementById("test-click1");
x1.addEventListener("click", function(){alert("テストです");}, false);
</script>
赤字部分でclickイベントを登録しています。
実行例は、以下の通りです。尚、分かり易いように枠を付けています。
要素内でマウスをクリックすると、アラートが表示されます。
clickで良く使われるのは、フォーム内のボタンをクリックした時に処理を実行する方法です。
<form>
<button type="button" id="test-click2">表示</button>
</form>
<script>
var x2 = document.getElementById("test-click2");
x2.addEventListener("click", function(){alert("テストです");}, false);
</script>
実行例は、以下の通りです。
「表示」ボタンをクリックすると、アラートが表示されます。
clickは<img>でも使えます。
<img src="11.png" alt="スペードA" id="test-click3" />
<script>
var x3 = document.getElementById("test-click3");
x3.addEventListener("click", function(){alert("テストです");}, false);
</script>
実行例は、以下の通りです。
画像をクリックすると、アラートが表示されます。
この他、<html>で使うとページのどこをクリックしてもイベントに出来ます。例えば、背景(文字等が記述されていない範囲)をクリックしてもイベントになります。
・サポートするブラウザ
以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。
| 機種 | ブラウザ | サポート |
|---|---|---|
| パソコン | Chrome | 〇 |
| Safari | 〇 | |
| Firefox | 〇 | |
| Microsoft Edge | 〇 | |
| Internet Explorer | v9以上 | |
| スマートフォン | Chrome | 〇 |
| Safari | 〇 | |
| Firefox | 〇 |
・サポートするタグ
<br>等を除いた多くのタグでサポートされています。
「イベントリスナー一覧」に戻る
