「JavaScriptで要素を取得しよう」の記事では、
「ユーザーがクリックしたときに文字を白くする」「あるところまでスクロールしたときに表示させる」などの、Webサイトのユーザーの操作に応じて「HTML・CSSを変化させる = DOM操作」を行うことができます。
と紹介しましたが、ここで「ユーザーがクリックしたときに」「あるところまでスクロールしたときに」という、処理が行われるタイミングについてのお話を今回はしていきます。
まずは、この「ユーザーの操作に応じて処理が行われるタイミング」をイベントというふうに呼びます。
その数は膨大で
- クリックしたとき
- ホバーしたとき
- スクロールしたとき
- マウスが動いたとき
※詳しく知りたい方はこちらが参考になります。
などなど、多くありますが、その全てを覚える必要はありません。
基本的に、これらのイベントと処理の発生に関する記述は、次の書き方を覚えればOKです。
セレクタ.addEventListener("イベント名", () => {
// 実行される処理
});こちらの書き方について詳しく解説していきます。
addEventListener()
前述したように、こちらの記述を使って、イベントとそのときに発生する処理を書いていきます。
例えば、
<button class="btn">
クリックしてね
</button>const btn = document.querySelector(".btn"); // セレクタを指定
btn.addEventListener("click", () => { // ボタンをクリックしたとき
console.log("クリックされたよ"); // コンソールに「クリックされたよ」と表示する
})という記述があります。
「クリックしてね」と書いてあるDOMの.btnをクリックしたら、アロー関数内にある、console.log("クリックされたよ");という処理が実行されます。
あとは、イベント名が"click"から、必要に応じて変わるのみで、非常にシンプルです。
ちなみに、処理が発生することを「発火」と言ったりするので、覚えておくと良いでしょう。
まとめ
今回は、イベントとその書き方に関して学んできました。
ポイントとしては
- 「ユーザーの操作に応じて処理が行われるタイミング」をイベントというふうに呼ぶ
- イベントを起こす場合は
addEventListener()を使用する
です。
どんどん実用的なJavaScriptができるようになってきますので、ここから楽しくなっていきます。
