その他の一般的なイベント
リソースイベント
###アンロードイベント前
「beforeunload」イベントは、ウィンドウ、ドキュメント、さまざまなリソースがアンロードされる前にトリガーされます。これを使用すると、ユーザーがリソースを誤ってアンインストールすることを防ぐことができます。
イベント オブジェクトの returnValue プロパティが空でない文字列の場合、ブラウザはダイアログ ボックスをポップアップ表示し、リソースをアンインストールするかどうかをユーザーに尋ねます。ただし、ユーザーが指定した文字列は表示されない場合があり、ブラウザには事前定義された文字列が表示されます。ユーザーが「キャンセル」ボタンをクリックした場合、リソースはアンロードされません。
window.addEventListener('beforeunload', function (event) {
event.returnValue = '本当に退会してもよろしいですか? ';
});
上記のコードでは、ユーザーがウィンドウを閉じると、ブラウザーはユーザーに確認を求めるウィンドウをポップアップ表示します。
ブラウザによっては、このイベントに対する動作が非常に不安定になります。また、一部のブラウザでは、「event.preventDefault()」を呼び出すときにダイアログ ボックスが表示されます。 IE ブラウザは、ダイアログ ボックスがポップアップする前に、空ではない文字列を明示的に返す必要があります。さらに、ほとんどのブラウザでは、ダイアログ ボックスに指定されたテキストは表示されず、デフォルトのテキストのみが表示されます。したがって、次の記述方法を使用すると、互換性を最大限に高めることができます。
window.addEventListener('beforeunload', function (e) {
varconfirmationMessage = 'ウィンドウを閉じることを確認しますか? ';
e.returnValue = 確認メッセージ;
確認メッセージを返します。
});
多くのモバイル ブラウザ (Safari など) はデフォルトでこのイベントを無視し、デスクトップ ブラウザにもこのイベントを無視するメソッドがあることに注意してください。したがって、このイベントはまったく効力を持たない可能性があり、ユーザーがブラウザ ウィンドウを閉じるのを防ぐことができず、このイベントを使用しないことをお勧めします。
さらに、「beforeunload」イベントが使用されると、ブラウザは現在の Web ページをキャッシュせず、「戻る」ボタンを使用するとサーバーに Web ページが再要求されます。これは、このイベントを監視する目的は一般に Web ページのステータスであるため、現時点ではページの初期ステータスをキャッシュしても意味がありません。
アンロードイベント
unload イベントは、ウィンドウが閉じられるか、document オブジェクトがアンロードされようとしているときにトリガーされます。そのトリガー順序は、beforeunload および pagehide イベントの後にあります。
「アンロード」イベントが発生すると、ドキュメントは特別な状態になります。すべてのリソースはまだ存在しますが、ユーザーには表示されず、すべての UI インタラクションは影響を受けません。このイベントは、listen 関数でエラーが発生しても、ドキュメントのアンロードを停止することはできません。
window.addEventListener('アンロード', function(event) {
console.log('ドキュメントはアンロードされます');
});
携帯電話では、ブラウザまたはシステムが Web ページを単純に破棄する場合がありますが、その場合にはイベントはまったく発生しません。そして、「beforeunload」イベントと同様に、「unload」イベントが使用されると、上記と同じ理由でブラウザは現在の Web ページをキャッシュしません。したがって、Web ページのアンロード時に実行されるコードを指定するには、いかなる状況でもこのイベントに依存しないでください。このイベントをまったく使用しないことを検討してください。
このイベントは pagehide で置き換えることができます。
ロードイベント、エラーイベント
ページまたはリソースが正常に読み込まれると、「load」イベントがトリガーされます。ページまたはリソースがブラウザーのキャッシュからロードされる場合、「load」イベントはトリガーされないことに注意してください。
window.addEventListener('load', function(event) {
console.log('すべてのリソースがロードされました');
});
「error」イベントは、ページまたはリソースの読み込みに失敗したときにトリガーされます。ユーザーがロードをキャンセルすると、「abort」イベントが発生します。
これら 3 つのイベントは実際には進捗イベントであり、「ドキュメント」オブジェクト内で発生するだけでなく、さまざまな外部リソースでも発生します。 Web の閲覧は、画像、スタイル シート、スクリプト、ビデオ、オーディオ、Ajax リクエスト (XMLHttpRequest) などのさまざまなリソースを読み込むプロセスです。これらのリソースと「document」オブジェクト、「window」オブジェクト、および XMLHttpRequestUpload オブジェクトは、「load」イベントと「error」イベントをトリガーします。
最後に、ページの load イベントを pageshow イベントに置き換えることもできます。
セッションの履歴イベント
ページ表示イベント、ページ非表示イベント
デフォルトでは、ブラウザは現在のセッションのページをキャッシュし、ユーザーが「進む/戻る」ボタンをクリックすると、ブラウザはキャッシュからページを読み込みます。
pageshow イベントは、最初の読み込みやキャッシュからの読み込みなど、ページが読み込まれるときにトリガーされます。ページが (ブラウザーからキャッシュされているかどうかに関係なく) 読み込まれるたびに実行するコードを指定したい場合は、このイベントの listen 関数にコードを配置できます。
初めてロードするとき、その起動順序は load イベントよりも後になります。キャッシュからロードする場合、キャッシュ内のページは通常、load イベント リスニング関数の実行後に表示されるものと同じであるため、load イベントはトリガーされません。そのため、それを繰り返す必要はありません。同様に、ページがキャッシュから読み込まれる場合、Web ページで初期化された JavaScript スクリプト (DOMContentLoaded イベントのリスニング関数など) は実行されません。
window.addEventListener('pageshow', function(event) {
console.log('pageshow: ', イベント);
});
「pageshow」イベントには「persisted」属性があり、ブール値を返します。ページが最初にロードされるとき、この属性は false で、ページがキャッシュからロードされるとき、この属性は true です。
window.addEventListener('pageshow', function(event){
if (event.persisted) {
// ...
}
});
pagehide イベントは pageshow イベントに似ており、ユーザーが「進む/戻る」ボタンを使用して現在のページから離れるとトリガーされます。アンロードイベントとの違いは、「アンロード」イベントのリスニング関数がウィンドウオブジェクトに定義されている場合、ページはキャッシュに保存されませんが、「ページハイド」イベントを使用するとページが保存されることです。キャッシュ内にあります。
「pagehide」イベント インスタンスには「persisted」属性もあります。この属性を「true」に設定すると、ページがキャッシュに保存されます。「false」に設定すると、Web ページがキャッシュに保存されなくなります。このとき、unload が設定されている場合、pagehide イベントの直後に実行されるイベント リスニング関数。
ページに <frame> または <iframe> 要素が含まれている場合、<frame> ページの pageshow イベントおよび pagehide イベントがメイン ページの前にトリガーされます。
これら 2 つのイベントは、ブラウザの「history」オブジェクトが変更された場合にのみトリガーされ、Web ページが表示されるかどうかとは関係がないことに注意してください。
ポップステートイベント
popstate イベントは、ブラウザの history オブジェクトの現在のレコードが明示的に切り替えられるとトリガーされます。 history.pushState() または history.replaceState() を呼び出しても、popstate イベントはトリガーされないことに注意してください。このイベントは、ユーザーがマウスで「戻る/進む」ボタンをクリックするか、「history.back()」、「history.forward()」、```を呼び出すなど、ユーザーが「history」レコード間を明示的に切り替えた場合にのみトリガーされます。スクリプトは、history.go()` のときにトリガーされます。
イベント オブジェクトには state プロパティがあり、現在のレコードの history.pushState メソッドおよび history.replaceState メソッドによって追加された state オブジェクトを保存します。
window.onpopstate = 関数 (イベント) {
console.log('状態: ' + イベント.状態);
};
History.pushState({ページ: 1}, 'タイトル 1', '?page=1');
History.pushState({ページ: 2}, 'タイトル 2', '?page=2');
History.replaceState({ページ: 3}, 'タイトル 3', '?page=3');
History.back(); // 状態: {"ページ":1}
History.back(); // 状態: null
History.go(2); // 状態: {"ページ":3}
上記のコードでは、pushState メソッドが 2 つのレコードを history に追加し、その後 replaceState メソッドが現在のレコードを置き換えます。したがって、back メソッドを 2 回続けて使用すると、現在のエントリが元の URL に返されます。これには、state オブジェクトが付加されていないため、イベントの state 属性は null になります。レコードを 2 つ進めて、メソッドによって追加された replaceState レコードに戻ります。
ブラウザが初めてページをロードするとき、「popstate」イベントをトリガーするかどうかは、Firefox によって異なる処理を受けません。
ハッシュチェンジイベント
hashchange イベントは、URL のハッシュ部分 (つまり、# 記号を含む # 記号の後の部分) が変更されたときにトリガーされます。このイベントは通常、「window」オブジェクト上でリッスンされます。
hashchange のイベント インスタンスには、oldURL プロパティと newURL プロパティという 2 つの固有のプロパティがあり、それぞれ変更前と変更後の完全な URL を表します。
// URL は http://www.example.com/ です
window.addEventListener('hashchange', myFunction);
関数 myFunction(e) {
console.log(e.oldURL);
console.log(e.newURL);
}
location.hash = 'パート2';
// http://www.example.com/
// http://www.example.com/#part2
Web ページのステータス イベント
DOMContentLoaded イベント
Web ページがダウンロードされて解析された後、ブラウザは document オブジェクトに対して DOMContentLoaded イベントをトリガーします。この時点では、Web ページの解析だけが完了しており (ページ全体の DOM が生成されています)、すべての外部リソース (スタイル シート、スクリプト、iframe など) はまだダウンロードされていない可能性があります。言い換えれば、このイベントは「load」イベントよりもはるかに早く発生します。
document.addEventListener('DOMContentLoaded', function (event) {
console.log('DOM 生成');
});
Web ページの JavaScript スクリプトは同期的に実行され、スクリプトがブロックされると、DOMContentLoaded イベントのトリガーが遅れることに注意してください。
document.addEventListener('DOMContentLoaded', function (event) {
console.log('DOM が生成されました');
});
// このコードは DOMContentLoaded イベントのトリガーを遅らせます
for(var i = 0; i < 1000000000; i++) {
// ...
}
###readystatechangeイベント
readystatechange イベントは、Document オブジェクトおよび XMLHttpRequest オブジェクトの readyState プロパティが変更されるとトリガーされます。 document.readyState には 3 つの可能な値があります: loading (Web ページが読み込まれています)、interactive (Web ページは解析されましたが、外部リソースはまだ読み込み中です)、および complete (Web ページとすべての外部リソースが終了しました)読み込み中、load イベントが発生しようとしています)。
document.onreadystatechange = function () {
if (document.readyState === 'インタラクティブ') {
// ...
}
}
このイベントは、DOMContentLoaded イベントの別の実装メソッドとして見ることができます。
ウィンドウイベント
スクロールイベント
「scroll」イベントは、文書または文書要素がスクロールされるとき、主にユーザーがスクロール バーをドラッグするときにトリガーされます。
window.addEventListener('scroll', callback);
このイベントは継続的に大量にトリガーされるため、リスニング機能では非常に計算量の多い操作を行う必要はありません。推奨されるアプローチは、「requestAnimationFrame」または「setTimeout」を使用してイベントのトリガー頻度を制御し、それを「customEvent」と組み合わせて新しいイベントをスローすることです。
（関数 （） {
var throttle = 関数 (タイプ、名前、オブジェクト) {
var obj = obj || ウィンドウ;
実行中の変数 = false;
var func = function () {
if (実行中) { 戻り値 }
実行中 = true;
requestAnimationFrame(function() {
obj.dispatchEvent(新しいカスタムイベント(名前));
実行中 = false;
});
};
obj.addEventListener(type, func);
};
//スクロールイベントをoptimizedScrollイベントに変換する
throttle('scroll', 'optimizedScroll');
})();
window.addEventListener('optimizedScroll', function() {
console.log('リソースを意識したスクロール コールバック!');
});
上記のコードでは、イベントトリガーの頻度を制御するために throttle() 関数が使用されており、内部関数 func() があり、各 scroll イベントが実際にこの関数をトリガーします。 requestAnimationFrame() メソッドは、func() 関数の内部で使用され、ページが再描画されるたび (1 秒あたり 60 回) にのみ optimizedScroll イベントがトリガーされるようにし、実際に scroll を変換します。イベントを「optimizedScroll」イベントに追加すると、トリガー頻度は 1 秒あたり最大 60 回に制御されます。
より長い時間間隔を設定するには、代わりに setTimeout() メソッドを使用してください。
（関数（） {
window.addEventListener('scroll'、scrollThrottler、false);
var スクロールタイムアウト;
関数scrollThrottler() {
if (!scrollTimeout) {
スクロールタイムアウト = setTimeout(function () {
スクロールタイムアウト = null;
実際のScrollHandler();
}、66);
}
}
関数actualScrollHandler() {
// ...
}
}());
上記のコードでは、各 scroll イベントは scrollThrottler 関数を実行します。この関数にはタイマー setTimeout があり、実際の実行タスク actualScrollHandler を 66 ミリ秒ごと (1 秒あたり 15 回) トリガーします。
以下は、「throttle」関数を記述するより一般的な方法です。
関数スロットル(fn, wait) {
var time = Date.now();
戻り関数() {
if ((時間 + 待機 - Date.now()) < 0) {
fn();
時間 = Date.now();
}
}
}
window.addEventListener('scroll', throttle(callback, 1000));
上記のコードは、「scroll」イベントの発生頻度を 1 秒あたり 1 回に制限します。
lodash 関数ライブラリは、直接使用できる既製の throttle 関数を提供します。
window.addEventListener('scroll', _.throttle(callback, 1000));
「debounce」の概念は、本書の前半で紹介しましたが、「throttle」との違いは、「throttle」は「スロットル」であり、一定期間内に 1 回だけ実行されることを保証するのに対し、「debounce」は```であることです。連続操作が必要な「手ぶれ補正」を終了してから実行してください。 Web ページのスクロールを例にとると、ユーザーがスクロールを停止するまで debounce は実行されませんが、ユーザーが Web ページをスクロールしている場合、スクロール プロセス中に throttle が実行されます。
サイズ変更イベント
resize イベントは、主に window オブジェクト上でブラウザ ウィンドウのサイズが変更されたときにトリガーされます。
varsizeMethod = function () {
if (document.body.clientWidth < 768) {
console.log('モバイルデバイスのビューポート');
}
};
window.addEventListener('resize'、resizeMethod、true);
このイベントも継続的に大量にトリガーされるため、上記の scroll イベントと同様に、throttle 関数を通じてイベント トリガーの頻度を制御するのが最善です。
fullscreenchange イベント、fullscreenerror イベント
fullscreenchange イベントは、全画面状態に入るときまたは全画面状態から出るときにトリガーされます。このイベントは document オブジェクトで発生します。
document.addEventListener('fullscreenchange', function (event) {
console.log(document.fullscreenElement);
});
fullscreenerror イベントは、ブラウザが全画面状態に切り替えられないときにトリガーされます。
クリップボード イベント
次の 3 つのイベントはクリップボード操作に関連します。
cut: 選択したコンテンツをドキュメントから削除し、クリップボードに追加するときにトリガーします。copy: コピーアクションが実行されるときにトリガーされます。paste: クリップボードの内容がドキュメントに貼り付けられた後にトリガーされます。
たとえば、入力ボックスの貼り付けイベントを無効にしたい場合は、次のコードを使用できます。
inputElement.addEventListener('paste', e => e.preventDefault());
上記のコードにより、ユーザーは <input> 入力ボックスにコンテンツを貼り付けることができなくなります。
3 つのイベント「cut」、「copy」、「paste」のイベント オブジェクトはすべて、「ClipboardEvent」インターフェイスのインスタンスです。 「ClipboardEvent」にはインスタンス属性「clipboardData」があり、クリッピングデータを格納するDataTransferオブジェクトです。特定の API インターフェイスと操作方法については、「ドラッグ アンド ドロップ イベント」の DataTransfer オブジェクトのセクションを参照してください。
document.addEventListener('copy', function (e) {
e.clipboardData.setData('text/plain', 'Hello, world!');
e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
e.preventDefault();
});
上記のコードにより、クリップボードにコピーされるデータは、ユーザーがコピーしたいデータではなく、開発者が指定したデータになります。
フォーカスイベント
フォーカス イベントは要素ノードと「ドキュメント」オブジェクトで発生し、フォーカスの取得または喪失に関連します。主に以下の4つのイベントが含まれます。
focus: 要素ノードがフォーカスを取得した後にトリガーされます。このイベントはバブルアップしません。blur: 要素ノードがフォーカスを失った後にトリガーされ、このイベントはバブルしません。focusin: 要素ノードがフォーカスを取得しようとしているときにトリガーされ、focusイベントの前に発生します。イベントが盛り上がります。focusout: 要素ノードがフォーカスを失いかけたときにトリガーされ、blurイベントの前に発生します。イベントが盛り上がります。
これら 4 つのイベントのイベント オブジェクトはすべて FocusEvent インターフェイスを継承します。 FocusEvent インスタンスには次のプロパティがあります。
FocusEvent.target: イベントのターゲット ノード。FocusEvent.popularTarget:focusinイベントの場合はフォーカスを失ったノードを返し、focusoutイベントの場合はフォーカスを受け取るノードを返します。
「focus」イベントと「blur」イベントはバブルせず、キャプチャフェーズ中にのみトリガーできるため、「addEventListener」メソッドの 3 番目のパラメータを「true」に設定する必要があります。
form.addEventListener('focus', function (event) {
イベント.ターゲット.スタイル.バックグラウンド = 'ピンク';
}、 真実）;
form.addEventListener('blur', function (event) {
イベント.ターゲット.スタイル.バックグラウンド = '';
}、 真実）;
上記のコードは、フォームのテキスト入力ボックス用です。フォーカスを受け取ると背景色を設定し、フォーカスを失うと背景色を削除します。
CustomEvent インターフェース
CustomEvent インターフェイスは、カスタム イベント インスタンスを生成するために使用されます。ブラウザーによって事前定義されたこれらのイベントは手動で生成できますが、データをイベントにバインドすることはできません。イベントのトリガー中に指定したデータを渡す必要がある場合は、CustomEvent インターフェイスによって生成されたカスタム イベント オブジェクトを使用できます。
ブラウザーは、CustomEvent イベント インスタンスを生成するための CustomEvent() コンストラクターをネイティブに提供します。
新しいカスタムイベント(タイプ、オプション)
CustomEvent() コンストラクターは 2 つのパラメーターを受け入れます。最初のパラメータはイベントの名前を表す文字列であり、これは必須です。 2 番目のパラメーターはイベントの構成オブジェクトです。このパラメーターはオプションです。 Event イベントの構成プロパティを受け入れることに加えて、「CustomEvent」の構成オブジェクトには独自のプロパティが 1 つだけあります。
detail: イベントの付随データを示します。デフォルトはnullです。
以下に例を示します。
var イベント = new CustomEvent('build', { 'detail': 'hello' });
関数eventHandler(e) {
console.log(e.detail);
}
document.body.addEventListener('build', function (e) {
console.log(e.detail);
});
document.body.dispatchEvent(イベント);
上記のコードでは、「build」イベントを手動で定義しました。イベントがトリガーされると、イベントが監視され、イベント インスタンスの detail 属性 (つまり、文字列 hello) が出力されます。
別の例を示します。
var myEvent = new CustomEvent('myevent', {
詳細： {
foo: 'バー'
}、
泡: 本当、
キャンセル可能: false
});
el.addEventListener('myevent', function (event) {
console.log('Hello ' +event.detail.foo);
});
el.dispatchEvent(myEvent);
上記のコードは、CustomEvent のイベント インスタンスが、Event インターフェイスのインスタンス属性に加えて、detail 属性も持っていることも示しています。
作者: wangdoc
アドレス: https://wangdoc.com/
ライセンス: クリエイティブ・コモンズ 3.0