備忘録的プログラミングリファレンス

close ( onclose )イベント

 close ( onclose )イベントは、簡易にポップアップダイアログやモーダルウィンドウを表示する <dialog> を閉じると発生するイベントです。
 alert() メソッドとの違いは、<dialog> は別ウィンドウではなく、ウィンドウ内で表示されます。

close イベントを追加( onclose イベントハンドラーとして追加)
document.getElementsByTagName('dialog')[0].addEventListener("close", (event)=>{
	console.log( 'event type : ' + event.type );
});
詳しくは Example を参照してください

  <dialog> を閉じることで発生するイベントには以下があります。違いは中断されて閉じる場合は cancel イベント、通常通りに閉じた場合は close イベントが発生します。

oncancel <dialog> を中断して閉じたら
onclose <dialog> を閉じたら

  <dialog> を定義しているのは HTMLDialogElement インターフェイスです。併せて参照してください。

 close ( onclose )イベントの定義は GlobalEventHandlers ミックスインを参照してください。

ページ内 Index

構文(Syntax)

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

in HTML

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

in JavaScript

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

addEventListener()

 イベントタイプを第1引数に指定します。関数を直接に呼び出には、関数名のみを第2引数に指定します。ただし、その関数に event 以外の引数が渡せません。

object.addEventListener("close ", function_name);

 スクリプトを直接記述する方法があります。この方法では、関数に引数を指定して呼び出せます。

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

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

備考(Remarks)

BubblesNo
CancelableYes
InterfaceEvent
Supported HTML Elements<dialog>

Example

 cancel ( oncancel )イベントの例です。以下の「確認」ボタンをクリックしてください。Example が動きます。

 「Close」ボタンをクリックするとダイアログを閉じるだけのシンプルな例です。
 HTMLDialogElement.close() メソッドの引数に返り値を渡すことができます。返り値は HTMLDialogElement.returnValue で取得できます。
 以下の例では、ダイアログを閉じることで HTMLDialogElement.close() による引数を表示します。

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