クリックイベントを取得するには、onclickイベントハンドラを使用します。
サンプルソース
ボタンを押すとアラートを表示するサンプルです。
タグにonclickを記述する方法（１パターン）と、記述しない方法（２パターン）の計３通りの書き方ができます。
例１）タグにonclickを記述する方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script> function test(){ alert("ボタンが押されました。") }; </script> </head> <body> <input type="button" value="ボタン" onclick="test();"> </body> </html> |
例２）タグにonclickを記述しない方法（onclickを使う）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script> window.onload = function(){ var bb = document.getElementById("btn1"); bb.onclick = function(){ alert("ボタンが押されました。") } }; </script> </head> <body> <input type="button" id="btn1" value="ボタン"> </body> </html> |
例３）タグにonclickを記述しない方法（addEventListenerを使う）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script> window.onload = function(){ var bb = document.getElementById("btn1"); bb.addEventListener("click", function(){ alert("ボタンが押されました。") }, false); }; </script> </head> <body> <input type="button" id="btn1" value="ボタン"> </body> </html> |
実行サンプル
↓クリックすると、アラートが表示されます。
↓divタグにonclickを設定することもできます。
ここもクリックできます。
解説
- divタグやアンカーや画像など、ボタンでなくてもonclickを設定できます。
- onclickでイベントが発生するのは、マウスボタンを押し下げた時点では無く、押して離した時点です。