Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/ja/docs/Web/API/HTMLDialogElement/close_event below:

HTMLDialogElement: close イベント - Web API

Baseline Widely available

close イベントは HTMLDialogElement オブジェクト上で、これが表すダイアログ (<dialog>) が閉じられたときに発生します。

このイベントはキャンセル不可で、バブリングしません。

このイベント名を addEventListener() などのメソッドで使用したり、イベントハンドラープロパティを設定したりします。

addEventListener("close", (event) => {});

onclose = (event) => {};

一般的な Event です。

<dialog class="example-dialog">
  <form method="dialog">
    <button>method="dialog" で閉じる</button>
  </form>
  <button class="close">.close() メソッドで閉じる</button>
  <p>または <kbd>Esc</kbd> キーを押してください</p>
</dialog>

<button class="open-dialog">ダイアログを開く</button>

<div class="result"></div>

button,
div {
  margin: 0.5rem;
}

const result = document.querySelector(".result");

const dialog = document.querySelector(".example-dialog");
dialog.addEventListener("close", (event) => {
  result.textContent = "ダイアログが閉じました";
});

const openDialog = document.querySelector(".open-dialog");
openDialog.addEventListener("click", () => {
  dialog.showModal();
  result.textContent = "";
});

const closeButton = document.querySelector(".close");
closeButton.addEventListener("click", () => {
  dialog.close();
});

• HTML の <dialog> 要素
• Event インターフェイス

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4