close ( onclose )イベント
close ( onclose )イベントは、簡易にポップアップダイアログやモーダルウィンドウを表示する <dialog> を閉じると発生するイベントです。
alert() メソッドとの違いは、<dialog> は別ウィンドウではなく、ウィンドウ内で表示されます。
document.getElementsByTagName('dialog')[0].addEventListener("close", (event)=>{
console.log( 'event type : ' + event.type );
});
<dialog> を閉じることで発生するイベントには以下があります。違いは中断されて閉じる場合は cancel イベント、通常通りに閉じた場合は close イベントが発生します。
| oncancel | <dialog> を中断して閉じたら |
| onclose | <dialog> を閉じたら |
<dialog> を定義しているのは HTMLDialogElement インターフェイスです。併せて参照してください。
close ( onclose )イベントの定義は GlobalEventHandlers ミックスインを参照してください。
ページ内 Index
- ad -
構文（Syntax）
HTMLPreElement にイベントハンドラーを定義する方法には以下があります。
in HTML
<tagelement onclose ="function(); ...;">
in JavaScript
object.onclose = function(){... };
addEventListener()
イベントタイプを第１引数に指定します。関数を直接に呼び出には、関数名のみを第２引数に指定します。ただし、その関数に event 以外の引数が渡せません。
object.addEventListener("close ", function_name);
スクリプトを直接記述する方法があります。この方法では、関数に引数を指定して呼び出せます。
object.addEventListener("close ", ()=>{ ... },false);
// または
object.addEventListener("close ",function(){ ... },false);
イベントについてはEventを参照してください。 イベントの監視についてはEventTargetが担っています。
備考（Remarks）
| Bubbles | No |
| Cancelable | Yes |
| Interface | Event |
| Supported HTML Elements | <dialog> |
Example
cancel ( oncancel )イベントの例です。以下の「確認」ボタンをクリックしてください。Example が動きます。
「Close」ボタンをクリックするとダイアログを閉じるだけのシンプルな例です。
HTMLDialogElement.close() メソッドの引数に返り値を渡すことができます。返り値は HTMLDialogElement.returnValue で取得できます。
以下の例では、ダイアログを閉じることで HTMLDialogElement.close() による引数を表示します。
- ad -