Zdarzenia#
Typ focus#
| Typ: | focus |
|---|---|
| Interfejs: | FocusEvent |
| Sync / Async: | Sync |
| Bąbelkowanie | Nie |
| Zaufane cele | defaultView, Element |
| Anulowanie | Nie |
| Domyślna akcja | Brak |
| Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu focus musi zostać wysłane przez aplikację kliencką w chwili, kiedy obiekt otrzymał zogniskowanie. Zogniskowanie musi zostać przekazane do obiektu przed wysłaniem tego typu zdarzenia. Zdarzenie focus jest bardzo podobne do zdarzenia focusin, aczkolwiek jest wysyłane po przeniesieniu zogniskowania i nie pozwala na bąbelkowanie.
W przypadku HTML5 zdarzenie typu focus 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("focus", readInfo, false); // faza celu - trzeci argument nieistotny
input2.addEventListener("focus", readInfo, false); // faza celu - trzeci argument nieistotny
input3.addEventListener("focus", readInfo, false); // faza celu - trzeci argument nieistotny
window.addEventListener("focus", readInfo, false); // faza celu - trzeci argument nieistotny
document.addEventListener("focus", readInfo, false); // uchwyt nie zostanie wywołany
document.documentElement.addEventListener("focus", readInfo, false); // uchwyt nie zostanie wywołany
</script>
</body>
</html>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ń zogniskowanie okna (np. poprzez kliknięcie na prawym oknie).</p>
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
<script>
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;
}
document.body.onfocus = readInfo;
document.body.addEventListener("focus", readInfo, true); // uchwyt nie zostanie wywołany
document.body.addEventListener("focus", readInfo, false); // uchwyt nie zostanie wywołany
</script>
</body>
</html>