Zdarzenia#

Typ focusout#

Typ:focusout
Interfejs:FocusEvent
Sync / Async:Sync
BąbelkowanieYes
Zaufane celedefaultView, Element
AnulowanieNie
Domyślna akcjaBrak
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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<!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

SPIS TREŚCI AKTUALNEJ STRONY

Zdarzenia (H1) Typ focusout (H2) Specyfikacje i inne materiały (H3)