Zdarzenia#
Typ focusin#
| Typ: | focusin |
|---|---|
| Interfejs: | FocusEvent |
| Sync / Async: | Sync |
| Bąbelkowanie | Yes |
| Zaufane cele | defaultView, Element |
| Anulowanie | Nie |
| Domyślna akcja | Brak |
| Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu focusin musi zostać wysłane przez aplikację kliencką w chwili, kiedy obiekt ma otrzymać zogniskowanie. Zogniskowanie musi zostać przekazane do obiektu po wysłaniu tego typu zdarzenia. Zdarzenie focusin jest bardzo podobne do zdarzenia focus, aczkolwiek jest wysyłane przed przeniesieniem zogniskowania i pozwala na bąbelkowanie.
W przypadku korzystania z tego typu zdarzenia autor treści może skorzystać z właściwości FocusEvent.relatedTarget (lub specyficznej metody i innych środków właściwych dla języka gospodarza), aby uzyskać aktualnie zogniskowany element przed przekazaniem zogniskowania do następnego celu zdarzenia zogniskowania, zatem ma dostęp do obu elementów (tracącego i uzyskującego zogniskowanie), bez konieczności stosowania zdarzeń typu blur czy focusout.
W przypadku HTML5 zdarzenie typu focusin 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("focusin", readInfo, false); // faza celu - trzeci argument nieistotny
input2.addEventListener("focusin", readInfo, false); // faza celu - trzeci argument nieistotny
input3.addEventListener("focusin", readInfo, false); // faza celu - trzeci argument nieistotny
window.addEventListener("focusin", readInfo, false); // przechwyci zdarzenie dla któregoś inputa
</script>
</body>
</html>