2023.04 JavaScript イベント処理

サンプルは github からダウンロードしてください。

ページが完全に読み込まれた際に発行されるイベント。サイズの大きな画像などあると読み込みを待ちます。対して、DOMContentLoaded は HTML の読み込みが完了した時点で発行されます。

window.addEventListener('load', (e) => {
  // ロード後にやりたい処理を書く
});

window.addEventListener('DOMContentLoaded', (e) => {
  // ロード後にやりたい処理を記述
});

よくある Loading 画面のときは画像まで読み込みが終わってからのほうがよいので load を使いますし、click などほかのイベントを追加したい場合は HTML があれば良いので DOMContentLoaded を使うなどどちらも使用します。

クリックされたときに発行されるイベントです。
一番良く使用している定番ですね。

element.addEventListener('click', (e) => {
// クリック時の処理を記述
});

スマホのときは touchstart, touchmove, touchend イベントを使用する場合もあります。簡単な処理であれば click でも動作します。

click イベントは色んな場面で使います。ボタン以外にもアコーディオンやタブ、モーダルなどのインターフェイスからお気に入りやいいねなど、どこかで使用したことがあるはずです。

フォームの内容が変わった時に発行されるイベントです。
テキストフィールドやチェックボックスなど種類により微妙に動きが異なります。

element.addEventListener('change', (e) => {
// フォームの内容が変わったときの処理を記述
});

問い合わせフォームのバリデーション(入力内容のチェック)によく使われます。

画面に要素が表示された時に処理を実行します。
以前は scroll イベントに関連付けることが多かったのですが、パフォーマンスの問題でこちらを使用するのが一般的になりました。

let observer = new IntersectionObserver(handleObserver);

要素が画面に現れるのを監視(Observe)します。表示された際に指定した関数(この場合は handleObserver) を実行します。

監視対象の要素は別途登録していきます。
※下記の場合 querySelectorAll で複数あるので forEach でループします

let image = document.querySelectorAll('.photo');
image.forEach(element => {
    observer.observe(element);
});