見出し画像

やっぱり。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="ボタン" >

がボタンを作る一文です。

画像1

こんな感じでボタンができていると思います。ぽちぽち押すことができます。今は何もおきません。これを押すと何かができるようにしていきます。ボタンを押すと、イベント発生!ということになります。

<input id="btn"	type="button" value="ボタン" onclick="bclick()">

onclick="bclick()"を付け加えます。そして、

<script> 
function bclick(){
   window.alert("ボタンが押されました!")
}
</script>

とします。これであとはボタンを押すだけです。

画像2

次に違う方法でもやってみましょう!

イベントリスナーを使うやり方です。

<!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"であればマウスボタンを押している時に発動します。いろいろ出来そうですね。

この記事が気に入ったらサポートをしてみませんか?