loadend ( onloadend )イベント

　loadend ( onloadend )イベントは、FileReader や XMLHttpRequest においてダウンロードプロセスが終了したらと発生するイベントです。
　このイベントは、正常に終了したかエラーで終了したかに関わらず、読み込みが終わると発生します。

loadende イベント

document.getElementById('example').addEventListener("loadend", (event)=>{
	console.log( 'event type : ' + event.type );
});

詳しくは Example を参照してください

　このイベントは、画像、音声、動画といったリソースファイルのダウンロードプロセスやページの遷移、エレメントの読み込みには機能しないようです。

ページ内 Index

構文（Syntax）
備考（Remarks）
Example
読み込みに関するイベント

構文（Syntax）

　HTMLPreElement にイベントハンドラーを定義する方法には以下があります。

in HTML

<tagelement onloadend ="function(); ...;">

in JavaScript

object.onloadend  = function(){... };

addEventListener()

　関数の呼び出し。関数名のみ使用で、event 以外の引数が渡せない。

object.addEventListener("loadend ", function_name);

　スクリプトを直接記述する方法。スクリプトから関数を呼び出せる。

object.addEventListener("loadend ", ()=>{ ... },false);
// または
object.addEventListener("loadend ",function(){ ... },false);

　イベントについてはEventを参照してください。イベントの監視についてはEventTargetが担っています。

備考（Remarks）


Bubbles	No
Cancelable	No
Interface	UiEvent（ユーザーインターフェイスから生成された場合）,Event
Supported HTML Elements	全般

Example

　loadend イベントは、XMLHttpRequest や FileReader で機能します。

　画像、音声、動画のリソースファイルのダウンロードやページやエレメントの読み込みでは機能しません。

　以下はXMLHttpRequest での例、FileReader での例です。

XMLHttpRequest での例

　XMLHttpRequest での例です。src/test.html ファイルを読み込んでページの遷移をしないで内容を追加表示します。
　ここでは、abort() メソッドによって任意に読み込みを中断します。

　XMLHttpRequest によるファイルの読み込みが始まったら onloadstart イベントを捉えて abort() メソッドで読み込みを中断します。
　このメソッドの実行によって onabort イベントが発生します。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。

HTML内容

CSS内容

Script内容

FileReader での例

　FileReader での例です。
　ここでは、abort() メソッドによって任意に読み込みを中断します。

　FileReader によるファイルの読み込みが始まったら onloadstart イベントを捉えて abort() メソッドで読み込みを中断します。
　このメソッドの実行によって abort イベントが発生します。