原文章：https://wangdoc.com/javascript/index.html
他の一般的なイベント
リソースイベント
beforeunloadイベント
beforeunloadイベントウィンドウをトリガーする前に、文書は、リソースがアンインストールされます。誤ったリソースをアンロードからユーザーを防ぐために使用することができます。
イベントオブジェクトの場合はreturnValueプロパティが空の文字列で、ブラウザは、リソースをオフロードするかどうかをユーザーに尋ねるダイアログボックスがポップアップ表示されます。しかし、ユーザが指定した文字列が表示されないことがあり、ブラウザは、事前定義された文字列を表示します。ユーザーがクリックボタンを「キャンセル」した場合、リソースがアンインストールされません。
window.addEventListener('beforeunload', function (event) {
event.returnValue = '你确定离开吗？';
});ユーザーがウィンドウを閉じるには場合は、上記のコードでは、ブラウザが確認するようユーザに尋ねるウィンドウがポップアップ表示されます。
このイベントのブラウザの動作は非常に矛盾している、といくつかのブラウザ呼び出しがevent.preventDefault()ポップアップします]ダイアログボックス。IEブラウザの必要性が明示的にnull以外の文字列を返すために、ダイアログボックスがポップアップ表示されます。また、ほとんどのブラウザでは、デフォルトのテキストを表示するダイアログボックスで指定したテキストを表示しません。従って、以下の文言は、最大の互換性を達成するために、使用されてもよいです。
window.addEventListener('beforeunload', function (e) {
var confirmationMessage = '确认关闭窗口？';
e.returnValue = confirmationMessage;
return confirmationMessage;
});多くのモバイルブラウザがこのイベントを無視するデフォルトことを注意、デスクトップブラウザ、このイベントを無視する方法があります。だから、それが反映されない場合があります、ユーザーがウィンドウを閉じ防ぐために、それに頼ることはできません。また、使用後はbeforeunloadイベント、ブラウザは、現在のページをキャッシュしませんサーバーページへの再要求に「戻る」ボタンを使用します。このイベントリスナーの目的は、一般的に、初期状態、無感その後、最初のページのキャッシュを修正するためです。
基本的に、あなたが聞くことができる唯一のunloadイベントは、他のものは聞くべきではありません。フォームを変更するユーザーが休暇に保存されていません。
unloadイベント
unloadイベントウィンドウに閉じられるかれるdocumentオブジェクトをアンロードするときにトリガ。これは、注文が入って来たトリガbeforeunload、pagehideイベントの後ろに。
unloadイベントが発生すると、文書が特定の状態にあります。すべてのリソースがまだ存在しますが、ユーザー、すべての無効のUIとの対話には表示されません。このイベントは、エラーがスローモニタ機能は、ドキュメントをアンロードを停止することができない場合でも、解除されません。
window.addEventListener('unload', function(event) {
console.log('文档将要卸载');
});電話で、ブラウザまたはシステムは、イベントが発生しません、ページ上で直接破棄されることがあります。そして、してbeforeunload使用後はイベント、unloadイベントを、ブラウザは、同上を現在のページをキャッシュしません。したがって、いかなる状況の下で、このイベントに依存しているページのアンロードを実行するコードを指定し、このイベントを使用しないで検討すべきです。
ロード・イベント、エラーイベント
loadイベントは、ときにページまたはリソースの読み込みにトリガ。ページやリソースは、ブラウザのキャッシュからロードされ、そして誘発しないことに注意してくださいloadイベントを。
window.addEventListener('load', function(event) {
console.log('所有资源都加载完成');
});errorページがロードまたはリソースに失敗したときにイベントがトリガされます。abortユーザーがロードをキャンセルすると、イベントがトリガされます。
これらの3つのイベントは、実際にはないだけで、イベントの進行に属しているdocumentオブジェクトが、また、上記の外部リソースの様々な発生します。ウェブを閲覧すると、さまざまなリソースをロードするためのプロセスである、画像（イメージ）、スタイルシート（スタイルシート）、スクリプト（スクリプト）、ビデオ（映像）、音声（オーディオ）、Ajaxリクエスト（XMLHttpRequestの）など。これらのリソースおよびdocumentオブジェクト、windowオブジェクト、XMLHttpRequestUploadオブジェクトがトリガするloadイベントとerrorイベントを。
歴史的なイベントのセッション
pageshowのイベント、pagehideイベント
デフォルトでは、現在のセッション（セッション）キャッシュページでブラウザはときに、ユーザーがクリックすると、「前進/戻る」ボタンは、ブラウザがキャッシュからページをロードします。
ページのロード時pageshowイベントは、キャッシュから最初の2例のロードとロードを含め、トリガ。あなたがページを指定したい場合は、コードが実行される（ではないから、どちらかのブラウザのキャッシュ）が、リスナー関数は、このイベントに置くことができるたびにロードされます。
最初にロードされたとき、それは順序が入って来たトリガload後のイベント。キャッシュからロードされた場合、loadキャッシュ内のページは通常見ているのでイベントがトリガされませんloadので、繰り返されていない、機能のイベントの実行を聞いた後のように。ページがロードされている場合も同様に、キャッシュから（例えばDOMContentLoadedイベントリスナー関数など）は、ページ内の初期化スクリプトJavaScriptが実行されません。
window.addEventListener('pageshow', function(event) {
console.log('pageshow: ', event);
});pageshowのイベントがありpersisted、ブール値を返すプロパティを。ページが最初にロードされると、このプロパティはfalse、ページがキャッシュからロードされたときに、このプロパティがありますtrue。
window.addEventListener('pageshow', function(event){
if (event.persisted) {
// ...
}
});pagehideイベントとpageshow「進む/戻る」ボタンを介してユーザが現在のページを残すトリガーのようなイベント。それはあなたがウィンドウ内のオブジェクトを定義する場合、ということですunloadイベントとは異なりunload、イベントリスナー関数の後に、ページがキャッシュに保存され、使用されることはありませんpagehideページがキャッシュに保存されます、イベントを。
pagehideイベントの例もありpersisted、このプロパティを設定するプロパティをtrue、それはあなたがキャッシュにページを保存する手段、セットには、falseunloadイベントがリスナー関数を設定されている場合、ページがキャッシュに格納されていないことを示し、その後、関数がイベントpagehide後になります今すぐ実行します。
ページが含まれている場合<frame>か<iframe>の要素<frame>ページpageshowイベントやpagehideメインページ前イベントトリガ。
注のみ、ブラウザの中にこれら二つの事象そのhistoryオブジェクトが変更されたときにトリガページが表示されていると、それは問題ではありません。
popstateイベント
popstateブラウザの中にイベントhistoryが発生し、現在のレコードオブジェクトを明示的に切り替えるためのトリガー。その通話を注意しhistory.pushState()たりhistory.replaceState()、トリガしませんpopstateイベント。だけでユーザーであればイベントhistoryスクリプトの中で、「戻る/進む」ボタン、またはコールにマウスクリックなどのトリガーを、記録間の明示的な切り替えhistory.back()、history.forward()、history.go()トリガされたとき。
イベントオブジェクトが持つstateプロパティ、保存history.pushState方法、およびhistory.replaceState現在のレコードを追加するためのメソッドstateオブジェクトを。
window.onpopstate = function (event) {
console.log('state: ' + event.state);
};
history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back(); // state: {"page":1}
history.back(); // state: null
history.go(2); // state: {"page":3}上記のコードでは、pushStateこの方法はしhistoryその後、二つのレコードを追加replaceStateオフ記録の現在の方法に取って代わります。したがって、2つの連続したback方法は、現在のエントリは、元のURLに返され、それが付属していませんstateイベントので、オブジェクトstateプロパティnull、その後、前方の2のレコードは、バックに行きましreplaceState追加する記録方法。
初めてのブラウザページがロードの場合は、トリガーにするかどうかをpopstateイベント処理同じではありませんが、Firefoxはイベントをトリガしません。
なhashchangeイベント
hashchangeイベントにURLのハッシュ部分（すなわち、#含む数の後部、#変更が発生したときの数）がトリガー。イベントは、通常、windowオブジェクト上で待機します。
hashchange：イベントのインスタンスは、2つのユニークな特性を持っているoldURL性質とnewURL完全なURLが変更前と後に、それぞれの属性を。
// URL 是 http://www.example.com/
window.addEventListener('hashchange', myFunction);
function myFunction(e) {
console.log(e.oldURL);
console.log(e.newURL);
}
location.hash = 'part2';
// http://www.example.com/
// http://www.example.com/#part2ページのステータスイベント
DOMContentLoadedイベント
ページのダウンロードや解析が完了すると、ブラウザがしますdocumentオブジェクトにDOMContentLoadedイベントをトリガします。この時点では、唯一の完全な分析、Webページには、（DOMページ全体が生成されます）、すべての外部リソース（スタイルシート、スクリプト、IFRAMEなど）はダウンロードが完了していないかもしれません。言い換えれば、よりこのイベントloadのイベントはかなり早い時間に発生しました。
document.addEventListener('DOMContentLoaded', function (event) {
console.log('DOM生成');
});スクリプトが詰まったら、ページJavaScriptのスクリプトを同期的に実行されたトリガ遅延されることに注意してくださいDOMContentLoadedイベントを。
document.addEventListener('DOMContentLoaded', function (event) {
console.log('DOM 生成');
});
// 这段代码会推迟触发 DOMContentLoaded 事件
for(var i = 0; i < 1000000000; i++) {
// ...
}readystatechangeイベント
readystatechangeXMLHttpRequestオブジェクトはDocumentオブジェクトとイベントreadyStateプロパティの変更トリガされます。document.readyState3つの値がありますloading（ページの読み込み）、 interactive（ウェブページが解析されますが、外部リソースの負荷状態にあるされている）と、complete（ページとオーバーロードされているすべての外部リソース、load今後のイベントトリガー）。
document.onreadystatechange = function () {
if (document.readyState === 'interactive') {
// ...
}
}このイベントは、と見ることができるDOMContentLoaded別の実装方法のイベント。
ウィンドウイベント
スクロールイベント
scroll主にユーザーにドキュメントやドキュメント要素のスクロールトリガは、スクロールバーをドラッグイベント。
window.addEventListener('scroll', callback);イベントは、継続的にかなりの引き金となりますので、そのモニタ機能の間で非常に計算コストの高い操作があってはなりません。お勧めは、使用するのですrequestAnimationFrameかsetTimeoutトリガイベントの周波数を制御し、組み合わせることができcustomEvent、新たなイベントをスローします。
(function () {
var throttle = function (type, name, obj) {
var obj = obj || window;
var running = false;
var func = function () {
if (running) { return; }
running = true;
requestAnimationFrame(function() {
obj.dispatchEvent(new CustomEvent(name));
running = false;
});
};
obj.addEventListener(type, func);
};
// 将 scroll 事件重定义为 optimizedScroll 事件
throttle('scroll', 'optimizedScroll');
})();
window.addEventListener('optimizedScroll', function() {
console.log('Resource conscious scroll callback!');
});上記のコードは、throttle関数は、トリガイベントの頻度を制御するために使用され、requestAnimationFrame方法は、各ページの再描画（毎秒60回）、それだけトリガすることを保証するためにscrollリスナー関数イベント。換言すれば、上記の方法は、あろうscroll毎秒60回に制限された周波数イベントをトリガします。具体的には、それはscroll長い周波数が毎秒未満の60倍である限り、それがトリガするイベントoptimizedScroll実行するイベントをoptimizedScrollモニタ機能イベント。
使用setTimeout方法は、より大きな間隔で配置することができます。
(function() {
window.addEventListener('scroll', scrollThrottler, false);
var scrollTimeout;
function scrollThrottler() {
if (!scrollTimeout) {
scrollTimeout = setTimeout(function () {
scrollTimeout = null;
actualScrollHandler();
}, 66);
}
}
function actualScrollHandler() {
// ...
}
}());上記のコードは、各scrollイベントが実行するscrollThrottler機能。タイマーを持っている機能setTimeoutは、すべて66ミリ秒（毎秒15回）実際のタスクの実行に一度トリガactualScrollHandler。
以下は、より一般的であるthrottle書き込み機能。
function throttle(fn, wait) {
var time = Date.now();
return function() {
if ((time + wait - Date.now()) < 0) {
fn();
time = Date.now();
}
}
}
window.addEventListener('scroll', throttle(callback, 1000));上記のコードは、あろうscroll毎秒一回に制限された周波数イベントをトリガします。
lodash図書館は、既製の提供throttle機能を直接使用することができます。
window.addEventListener('scroll', _.throttle(callback, 1000));以前、この本の中で私たちは、導入されたdebounce概念を、throttleそして、それは違いあるthrottle一定の期間にわたって一度だけ実施を確保するために、「切断」で、debounce連続運転の終了後に実行されるように、「手ぶれ補正」です。ページへのスクロールは、例えば、debounceユーザーが実行した後にスクロールを停止するまで待たなければならない、throttleあなたがウェブページをスクロールしてきた、またはスクロール時に実行するかどうかはあります。
resizeイベント
resizeイベントは主に、ブラウザウィンドウのトリガーのサイズを変更するwindow上記被験者。
var resizeMethod = 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：クリップボードの内容は、トリガ後の文書に貼り付けます。
これらの3つのイベントは、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();
});上記のコードをクリップボードにコピーでき、開発者によって指定されたすべてのデータは、いないユーザーが望んでいるデータをコピーします。
フォーカスイベント
フォーカスイベントは、要素ノードとで発生するdocumentフォーカスを獲得または失っに関連し、上記オブジェクト。これは、次の4つのイベントが含まれています。
focus：要素ノードをトリガするフォーカスをした後、イベントがバブルしません。blur：要素ノードをトリガした後にイベントがない泡を行い、フォーカスを失いました。focusin：焦点は、発生したときにElementノードがトリガされるfocusイベントの前に。このイベントバブリング。focusout：要素は、意志のトリガーがフォーカスを失ったことをノード、発生するblurイベントの前に。このイベントバブリング。
これらの4つのイベントが継承されているFocusEventインターフェイスを。FocusEvent例としては、次のプロパティがあります。
FocusEvent.target：イベントのターゲットノード。FocusEvent.relatedTarget：についてfocusinイベント、リターン・ノードがフォーカスを失った。ためのfocusoutイベント、焦点ノードを受け入れるように戻ります。ためfocus及びblurイベント戻りますnull。
のでfocusとblurイベントバブルは、キャプチャ段階のみトリガすることができないので、addEventListenerこの方法のニーズの三番目のパラメータを設定しますtrue。
form.addEventListener('focus', function (event) {
event.target.style.background = 'pink';
}, true);
form.addEventListener('blur', function (event) {
event.target.style.background = '';
}, true);上記のコード形式テキスト入力ボックスのために、背景色がフォーカスを失った除去、フォーカスを受け入れるように背景色を設定します。
CustomEventインタフェース
カスタム・イベント・インスタンスを生成するためCustomEventインタフェース。これらのイベントは、手動で生成することができますが、ブラウザを事前に定義されますが、多くの場合、イベントのバインドデータはできません。あなたが指定したデータを渡し、同時にトリガイベントに必要がある場合は、生成されたカスタムイベントオブジェクトCustomEventインタフェースを使用することができます。
でブラウザのネイティブCustomEvent()コンストラクタ、CustomEventイベントインスタンスを生成します。
new CustomEvent(type, options)CustomEvent()コンストラクタは、2つのパラメータを取ります。最初の引数は、イベントの名前を表す文字列で、これは必見です。第2のパラメータは、このパラメータはオプションで、設定対象イベントです。CustomEvent設定オブジェクト構成プロパティイベントイベント、自分の財産の一つだけを受信することに加えて。
detail：データを付随して、それがデフォルトのイベントを表しますnull。
ここでは一例です。
var event = new CustomEvent('build', { 'detail': 'hello' });
function eventHandler(e) {
console.log(e.detail);
}
document.body.addEventListener('build', function (e) {
console.log(e.detail);
});
document.body.dispatchEvent(event);上記のコードは、私たちは手動で定義されbuildたイベントを。トリガ・イベントの後、それは、監視されるので、イベント・インスタンスの出力detail属性（すなわち、列hello）。
ここでは別の例です。
var myEvent = new CustomEvent('myevent', {
detail: {
foo: 'bar'
},
bubbles: true,
cancelable: false
});
el.addEventListener('myevent', function (event) {
console.log('Hello ' + event.detail.foo);
});
el.dispatchEvent(myEvent);コードはまた、イベントCustomEvent例は、上述された、イベント・インターフェース・インスタンスの属性を有することに加えて、さらに有するdetail特性を。