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によるイベント設定は不要だと考えられます。