やっぱり。JavaScript!-イベントを発生させよ!
イベントを発生させましょう!ちょっとわかりにくいですね。あるきっかけで何かを発生、変化させることで、具体的にはボタンを押すと何かが起きる、変化させるということになります。
まずホームページの中にボタンを作りましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> タイトル</title>
<script>
window.onload = function(){
} )
}
</script>
</head>
<body>
本文
<p>こんにちは</p>
<input id="btn" type="button" value="ボタン" >
</body>
</html>
とします。
<input id="btn" type="button" value="ボタン" >
がボタンを作る一文です。
こんな感じでボタンができていると思います。ぽちぽち押すことができます。今は何もおきません。これを押すと何かができるようにしていきます。ボタンを押すと、イベント発生!ということになります。
<input id="btn" type="button" value="ボタン" onclick="bclick()">
onclick="bclick()"を付け加えます。そして、
<script>
function bclick(){
window.alert("ボタンが押されました!")
}
</script>
とします。これであとはボタンを押すだけです。
次に違う方法でもやってみましょう!
イベントリスナーを使うやり方です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> タイトル</title>
</head>
<body>
本文
<p>こんにちは</p>
<input id="btn" type="button" value="ボタン">
<script>
let buttonclick = document.getElementById("btn")
buttonclick.addEventListener("click", function(){
alert("クリック!")})
</script>
</body>
</html>
<script></script>を</body>の直上に持ってきました。こうすることによって、HTMLのタグが読み込まれた上でscriptが読み込まれ、実行されます。
let buttonclick = document.getElementById("btn")
で"id"を読み込んで変数に入れます。次に変数を使ってイベントリスナーを定義していきます。
buttonclick.addEventListener("click", function(){
alert("クリック!")})
"click" した場合にfnction 関数を実行します。この場合は"クリック!"とアラートが出ます。命令の形は以下となります。
イベント対象の要素.addEventListener("イベントの種類", function(){
なんらかの処理 })
イベント種類 と内容です。
load
Webページの読み込みが完了した時に発動(画像などのリソースすべて含む)
DOMContentLoaded
Webページが読み込みが完了した時に発動(画像などのリソースは含まない)
click
マウスボタンをクリックした時に発動
mousedown
マウスボタンを押している時に発動
mouseup
マウスボタンを離したときに発動
mousemove
マウスカーソルが移動した時に発動
keydown
キーボードのキーを押したときに発動
keyup
キーボードのキーを離したときに発動
keypress
キーボードのキーを押している時に発動
change
フォーム部品の状態が変更された時に発動
submmit
フォームのsubmitボタンを押したときに発動
scroll
画面がスクロールした時に発動
種類を指定してやりその動作によってイベントが実行されます。例えば"mousedown"であればマウスボタンを押している時に発動します。いろいろ出来そうですね。
この記事が気に入ったらサポートをしてみませんか?