JavaScriptでイベントonkeydown、onkeyup、onchange

キーボードのキーが押されたとのイベントonkeydown、onkeyup

キーが押されたときにイベントが発生するのはwindow.onkeydownプロパティかdocument.onkeydownプロパティに関数を入れてあげればよい。

onkeydown = function(e) { alert(e.key); }

またはアロー関数を使えば

onkeydown = e => alert(e.key);

キーを押しっぱなしにするとこのイベントが連続して発生するので、1回だけイベントを起こしたい時はonkeyup（キーが離されたとき）を使うとよい。

onkeyup = function(e) { alert(e.key); }

またはアロー関数を使えば

onkeyup = e => alert(e.key);

となる。

input、select、textareaで変更が発生したときのイベントonchange

JavaScript側でwindow.onload時にイベントハンドラーを設定しちゃう方法

HTML側

<input id="here" type="date">

等とやっておいて

JavaScriptには以下のようにして設定する。

window.onload = function () {
	document.getElementById("here").onchange = auieo;
}

//イベントが発生したときの処理は
function aiueo(e) {
	window.alert("イベントが発生:" + e.target.value);
}

HTMLのonclickで関数をやろうとするとイベントのeが渡らないっぽい。

<!--これ駄目↓-->
<input onclick="aiueo()" type="button" value="btn">

イベントハンドラープロパティに入れた関数でないとeが渡らないようだ。

---

プログラミング学習を体系的に進めたい人へ

独学で基礎を確認したあとに、質問できる環境や転職・副業向けの学習サポートも比べたい人は、プログラミングスクールの比較記事も参考にしてください。学習目的、料金、受講期間、サポート範囲を分けて見ると、自分に合う学び方を選びやすくなります。

• プログラミングスクール総合ランキング
• プログラミングスクール一覧
• プログラミング独学の進め方