何をする書き方？
addEventListenerは、クリックなどの出来事が起きたときに実行する処理を登録します。処理は関数として渡します。ボタンを押すと値が増える小さなカウンターを作ってみましょう。
基本の形
要素.addEventListener("click", 関数);clickクリックやボタンのキーボード操作。() => { }名前を付けない関数の書き方。count += 1countに1を足して代入。短い例で確かめる
app.js
const button = document.querySelector("button");
button.addEventListener("click", function () {
document.querySelector("p").textContent = "押しました";
});結果
ボタンを押すと「押しました」と表示されます。
準備・実行方法を確認する
計算や配列の例は、ブラウザーの開発者ツールのConsoleに貼り付けて実行できます。画面操作の例は、必要なHTML要素を置き、defer付きscriptでapp.jsを読み込んでください。
もう少し詳しいコードを見る
app.js
// <button id="add">増やす</button>
// <p id="count">0</p> をHTMLに置く
let count = 0;
const button = document.querySelector("#add");
const output = document.querySelector("#count");
if (button && output) {
button.addEventListener("click", () => {
count += 1;
output.textContent = String(count);
});
}結果
ボタンを押すたびに、表示が0 → 1 → 2と増えます。ページの再読み込みで0に戻ります。
ここで、書き換えてみよう
練習用の段落とボタンを用意しています。変更したコードは、ページを移動すると元に戻ります。
一問だけ、復習しよう
「クリックに反応する」の書き方はどれ？
少し変えてみよう
count += 1をcount += 2に変えて、2ずつ増えるようにしてみましょう。
つまずいたら、ここを確認
addEventListenerに実行済みの結果を渡さないようにします。処理は関数の中に書きます。
自分の言葉でメモ
記録はこのブラウザーに保存されます。