Zdarzenia#
Typ focusout#
| Typ: | focusout |
|---|---|
| Interfejs: | FocusEvent |
| Sync / Async: | Sync |
| Bąbelkowanie | Yes |
| Zaufane cele | defaultView, Element |
| Anulowanie | Nie |
| Domyślna akcja | Brak |
| Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu focusout musi zostać wysłane przez aplikację kliencką w chwili, kiedy obiekt ma stracić zogniskowanie. Zogniskowanie musi zostać przekazane do obiektu po wysłaniu tego typu zdarzenia. Zdarzenie focusout jest bardzo podobne do zdarzenia blur, aczkolwiek jest wysyłane przed przeniesieniem zogniskowania i pozwala na bąbelkowanie.
W przypadku HTML5 zdarzenie typu focusout jest automatycznie odpalane przez przeglądarki internetowe zgodnie z ogólnym opisem zdarzeń zogniskowania.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {outline: 5px solid green;}
</style>
</head>
<body>
<p>Zmień zogniskowanie w kontrolkach przy użyciu tabulatora lub myszy.</p>
<input id="input1" type="text" value="Pierwsza kontrolka">
<input id="input2" type="text" value="Druga kontrolka">
<input id="input3" type="text" value="Trzecia kontrolka">
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
<script>
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var input3 = document.getElementById("input3");
var info = document.getElementById("info");
function readInfo(e){
var data = "Interfejs: " + e
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.target: " + e.target
+ "<br>" + "e.target.value: " + e.target.value
+ "<br>" + "e.relatedTarget: " + e.relatedTarget;
if (e.relatedTarget){
data += "<br>" + "e.relatedTarget.value: " + e.relatedTarget.value;
}
data += "<br>" + "e.currentTarget: " + e.currentTarget
+ "<br>" + "e.eventPhase: " + e.eventPhase + "<br><br>";
info.innerHTML = data + info.innerHTML;
}
input1.addEventListener("focusout", readInfo, false); // faza celu - trzeci argument nieistotny
input2.addEventListener("focusout", readInfo, false); // faza celu - trzeci argument nieistotny
input3.addEventListener("focusout", readInfo, false); // faza celu - trzeci argument nieistotny
window.addEventListener("focusout", readInfo, false); // przechwyci zdarzenie dla któregoś inputa
</script>
</body>
</html>Specyfikacje i inne materiały#
Pasek społecznościowy