Zdarzenia#
Typ resize#
| Typ: | resize |
|---|---|
| Interfejs: | UIEvent |
| Sync / Async: | Sync |
| Bąbelkowanie | Nie |
| Zaufane cele | defaultView, Element |
| Anulowanie | Nie |
| Domyślna akcja | Brak |
| Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu resize musi zostać wysłane przez aplikację kliencką w chwili, kiedy widok dokumentu uległ przeskalowaniu. Zdarzenie to wysyłane zostaje dopiero po wykonaniu przez aplikację kliencką wszystkich operacji wynikających ze zmiany rozmiarów tego konkretnego celu zdarzenia.
Aplikacje klienckie, które wspierają wielokrotne wlewanie (reflow) layoutu dokumentu inicjowane przez użytkownika w czasie zmiany rozmiaru muszą wysyłać zdarzenie typu resize synchronicznie, po każdym takim ponownym wlewaniu.
Obiekt defaultView powinien być zawsze skalowalny. Język gospodarza może definiować pewne elementy podlegające przeskalowaniu i na jakich warunkach ma się to odbywać (np. dla elementów <iframe> lub elementów o szczególnych cechach, takich jak szerokość i wysokość). Specyfikacja D3E nie precyzuje zachowania dla elementów. Szczegółowe informacje porozrzucane są w innych dokumentach, jak np. "CSSOM View Module".
Warto podkreślić, że ustawienie CSS-owej właściwości resize dla elementów i późniejsza zmianach ich rozmiarów (poprzez przeciągnięcie myszką odpowiedniego znacznika) nie spowoduje odpalenia zdarzenia typu resize.
W przypadku HTML5 zdarzenie typu resize jest automatycznie odpalane przez przeglądarki internetowe dla elementów <video>, kiedy faktyczna szerokość lub faktyczna wysokość zasobu multimedialnego ulega zmianie (np. z powodu wybrania innej ścieżki wideo czy ustalenia faktycznych rozmiarów tuż po pobraniu zasobu).
Zdarzenie typu resize jest różne od zdarzeń typu SVGZoom z SVG, choć oba mogą występować w tym samym czasie, lub jako konsekwencja tego samego działania użytkownika. W szczególności "powiększanie fontu" lub "powiększanie strony" wcale nie musi wywoływać zdarzenia resize.
W poprzednich specyfikacjach zdarzeń DOM zdarzenie typu resize zezwalało na bąbelkowanie, ale ze względu na wydajność nie zostało to wdrożone w większości aplikacji klienckich, dlatego też aktualna specyfikacja usuwa fazę bąbelkowania dla tego zdarzenia.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 2px solid;
padding: 10px 40px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<p>Zmień rozmiar okna przeglądarki (np. poprzez kliknięcie na drugim przycisku w prawym górnym rogu).</p>
<p>Faktyczne wymiary filmu to 320x240. Zdarzenie przeskalowania powinno odpalić się automatycznie po załadowaniu filmu.</p>
<p>
<video src="../../../dom/zdarzenia/movie.mp4" width="500" height="250" controls>
Twoja przeglądarka nie obsługuje elementu VIDEO.
</video>
</p>
<div>Blok z możliwością ręcznej zmiany rozmiaru (reguły CSS). Chwyć za znacznik w prawym dolnym rogu.</div>
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
<script>
var info = document.getElementById("info");
var video = document.getElementsByTagName("video")[0];
var div = document.getElementsByTagName("div")[0];
function readInfo(e){
var data = "Interfejs: " + e
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.currentTarget: " + e.currentTarget
+ "<br>" + "e.target: " + e.target
+ "<br>" + "e.eventPhase: " + e.eventPhase + "<br><br>";
info.innerHTML = info.innerHTML + data;
}
window.addEventListener("resize", readInfo, false); // faza celu - trzeci argument nieistotny
video.addEventListener("resize", readInfo, false); // faza celu - trzeci argument nieistotny
document.addEventListener("resize", readInfo, false); // przechwyci zdarzenie dla video
video.parentNode.addEventListener("resize", readInfo, false); // przechwyci zdarzenie dla video
div.addEventListener("resize", readInfo, false); // uchwyt nie zostanie wywołany
</script>
</body>
</html>Na chwilę obecną żadna aktualna przeglądarka internetowa nie odpala zdarzenie typu resize dla elementów <video>.
Trzeba nadmienić, że uchwyty przez właściwość i uchwyty przez atrybut, które zarejestrowano na elemencie <body> lub elementach ramek, są traktowane tak jakby zarejestrowano je na obiekcie Window, który je zawiera. Uwaga nie dotyczy uchwytów przez metodę.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Zmień rozmiar okna przeglądarki (np. poprzez kliknięcie na drugim przycisku w prawym górnym rogu).</p>
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
<script>
var info = document.getElementById("info");
var video = document.getElementsByTagName("video")[0];
var div = document.getElementsByTagName("div")[0];
function readInfo(e){
var data = "Interfejs: " + e
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.currentTarget: " + e.currentTarget
+ "<br>" + "e.target: " + e.target
+ "<br>" + "e.eventPhase: " + e.eventPhase + "<br><br>";
info.innerHTML = info.innerHTML + data;
}
document.body.onresize = readInfo;
document.body.addEventListener("resize", readInfo, true); // uchwyt nie zostanie wywołany
document.body.addEventListener("resize", readInfo, false); // uchwyt nie zostanie wywołany
</script>
</body>
</html>