JavaScriptにおける__「ユーザー操作に合わせて発生するイベント」について__、自己の忘備録としてまとめています。

参考URL

参考著書

ウェブ上には、多くの__イベント__があります。

クリック
タップ
スクロール
画像読み込み完了
など

JavaScriptではそれらのイベントに合わせて処理を実行させることができます。

###イベント発生時に処理を設定する

イベントに合わせて処理を実行させる際は、__addEventListner()__メソッドを使うとイベントを制御することができます。

イベントを発生させるオブジェクトのことを__「イベントターゲット」と呼び、
「イベントターゲット」でイベントが発生したときの処理を「イベントリスナー」__と呼びます。

addEventLister()のオプション

イベントリスナーを設定する際、addEventLister()メソッドの第３引数にオプションを指定することができます。

オプション	意味	型
capture	キャプチャリングフェーズで取得するか	真偽値
once	イベントリスナーの呼び出しを１回のみにするか	真偽値
passive	パッシブイベントかどうか	真偽値

例えば、イベントリスナーを１度だけ呼び出したい時は、onceにtrueを設定します。

// オプション指定
const options = {
    once: true,
};

const btn = document.querySelector('.button');
const onClickButton = () => {
    console.log('ボタンがクリックされました！');
};

btn.addEventListener('click', onClickButton, option);

__キャプチャリングフェーズ__や__パッシブイベント__については、自分自身知らない概念だったので、下記に参考リンクだけ記載しておきます。

キャプチャリングフェーズについて

イベントの伝搬(キャプチャリングとバブリング

パッシブイベントについて

passive: trueでなぜパフォーマンスがよくなるの？簡単な説明と使い方！

設定したイベントを削除する

設定したイベントを削除する場合は、__removeEventListner()__メソッドを使用します。

const btn = document.querySelector('.button');
const onClickButton = () => {
    console.log('ボタンがクリックされました！');
};

btn.addEventListener('click', onClickButton);

//3秒後にイベントを削除する
setTimeout(() => {
    btn.removeEventListener('click', onClickButton);
}, 3000);

ページが表示された時に処理をする

JavaScriptでDOMを操作できるのは、HTMLドキュメントの読み込みと解析が完了したタイミングです。このタイミングで発生するのが、__DOMContentedLoadedイベント__です。

__loadイベント__は、ページ内の全リソース（画像、音声、動画など）の読み込み完了時に発生します。そのため、__DOMContentedLoadedイベント__によりもタイミングが遅くなります。

イベント名	発生タイミング
DOMContentLoaded	HTMLドキュメントの解析完了時
load	全リソースを読み込み完了時

__「ページが表示されたいタイミングで操作をしたい」__といった場合、大抵DOMContentedLoadedを使う方が適しています。

scriptタグのdefer属性とDOMContentedLoadedについて

scriptタグにdefer属性を設定してJavascriptを読み込むと、スクリプトはHTMLの解析終了後に実行されます。これは__DOMContenedLoadedの発生前__であるため、defer属性を設定している場合はDOMContentedLoadedによるイベント設定は不要だと考えられます。