Event#

Event.bubbles#

Właściwość bubbles zwraca boolowską wartość true jeśli dane zdarzenie obsługuje fazę bąbelkowania (może zostać przechwycone w tej fazie), w przeciwnym razie zwrócona zostanie wartość false. Właściwość jest tylko do odczytu.

Składnia#

Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
var bubbling = event.bubbles;

gdzie poszczególne człony oznaczają:

Przy tworzeniu zdarzenia wartością domyślną dla właściwości bubbles musi być boolowskie false.

W przypadku syntetycznych zdarzeń możemy samodzielnie ustawić obsługę fazy bąbelkowania (np. przy inicjowaniu zdarzenia). Zaufane zdarzenia mają domyślnie zdefiniowaną obsługę poszczególnych faz, dla przykładu zdarzenie typu focus nie obsługuje bąbelkowania.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>

	<script>

		// Uruchom po całkowitym załadowaniu dokumentu
		window.onload = function(){

			var button = document.getElementById("press");
			var info = document.getElementById("info");

			button.addEventListener("click", function(e){

				info.innerHTML += "Interfejs zdarzenia e: " + e // [object MouseEvent]
					+ "<br>" + "e.type: " + e.type // click
					+ "<br>" + "e.bubbles: " + e.bubbles // true
					+ "<br>" + "e.cancelable: " + e.cancelable // true
					+ "<br>" + "e.defaultPrevented: " + e.defaultPrevented // false
					+ "<br>" + "e.isTrusted: " + e.isTrusted // true
					+ "<br>" + "e.eventPhase: " + e.eventPhase // 2
					+ "<br>" + "e.timeStamp: " + e.timeStamp // liczba całkowita z wartością zależną od chwili uruchomienia przykładu
					+ "<br>" + "e.currentTarget: " + e.currentTarget // [object HTMLInputElement]
					+ "<br>" + "e.target: " + e.target; // [object HTMLInputElement]

				e.preventDefault();

				info.innerHTML += "<br><br>" + "e.defaultPrevented: " + e.defaultPrevented; // true

			}, false);

			window.addEventListener("click", function(e){

				info.innerHTML += "<br><br>" + "Interfejs zdarzenia e: " + e // [object MouseEvent]
					+ "<br>" + "e.currentTarget: " + e.currentTarget // [object Window]
					+ "<br>" + "e.target: " + e.target // [object HTMLInputElement]
					+ "<br>" + "e.timeStamp: " + e.timeStamp;// liczba całkowita z wartością zależną od chwili uruchomienia przykładu;

			}, false);

		}

	</script>

</head>

<body>

	<p>Kliknij w przycisk by uzyskać szczegółowe informacje dla zdarzenia.</p>
	<input id="press" type="button" value="Kliknij mnie!">

	<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
	<p id="info"></p>

</body>

</html>

Interfejs Web IDL#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
readonly attribute boolean bubbles;

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Event (H1) Event.bubbles (H2) Składnia (H3) Interfejs Web IDL (H3) Specyfikacje i inne materiały (H3)