CompositionEvent#

new CompositionEvent()#

Interfejs CompositionEvent może być wywoływany w roli konstruktora, dzięki czemu pozwala na bezpośrednie tworzenie nowych zdarzeń kompozycji (syntetycznych) wprost z interfejsu. Przy tworzeniu nowego zdarzenia od razu ustalany jest jego typ (pierwszy argument) oraz specyficzne cechy ustawiane za pomocą opcjonalnego słownika CompositionEventInit (drugi argument).

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 new_compositionEvent = new CompositionEvent(type [, compositionEventInitDict]);

gdzie poszczególne człony oznaczają:

Algorytm wywołania konstruktora new CompositionEvent(type, compositionEventInitDict) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:

  1. Zwróć nowe zdarzenie kompozycji za pomocą algorytmu tworzenia zdarzenia z typem type i słownikiem compositionEventInitDict (jeśli występuje).

Obiekt zwracany przez konstruktor new CompositionEvent() implementuje interfejs CompositionEvent, dlatego ma dostęp do wszystkich poleceń z tego interfejsu (oraz z kolejnych interfejsów w łańcuchu dziedziczenia). Warto podkreślić, że i opcjonalny słownik CompositionEventInit dziedziczy ze słownika UIEventInit, dlatego ma dostęp do wszystkich jego członków w chwili przekazania do konstruktora.

Nowy obiekt zdarzenia będzie miał ustawiane domyślne wartości dla wszystkich swoich właściwości i dodatkowo zostanie automatycznie zainicjowany zgodnie z przekazanymi argumentami przy jego wywołaniu, w przeciwieństwie do polecenia Document.createEvent(), dlatego może być od razu wysłany za pomocą metody EventTarget.dispatchEvent().

W ramach uzupełnienia warto przeanalizować wady i zalety poszczególnych poleceń odpowiedzialnych za tworzenie niezaufanych zdarzeń.

Ze względów bezpieczeństwa zdarzenia generowane przy użyciu konstruktora new CompositionEvent() muszą ustawiać wartość właściwości Event.isTrusted na boolowskie false.

Prosty przykład:

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

	// Tworzymy nowe zdarzenie
	var compositionEvent1 = new CompositionEvent("piesek");

	document.write(compositionEvent1); // [object CompositionEvent]
	document.write("<br>");
	document.write(compositionEvent1.type); // piesek
	document.write("<br>");
	document.write(compositionEvent1.bubbles); // false
	document.write("<br>");
	document.write(compositionEvent1.cancelable); // false
	document.write("<br>");
	document.write(compositionEvent1.view); // null
	document.write("<br>");
	document.write(compositionEvent1.detail); // 0
	document.write("<br>");
	document.write(compositionEvent1.data); // "" - pusty łańcuch
	document.write("<br>");
	document.write(compositionEvent1.locale); // "" - pusty łańcuch
	document.write("<br>");
	document.write(compositionEvent1.defaultPrevented); // false
	document.write("<br>");
	document.write(compositionEvent1.isTrusted); // false
	document.write("<br>");
	document.write(compositionEvent1.eventPhase); // 0
	document.write("<br>");
	document.write(compositionEvent1.timeStamp); // liczba całkowita z wartością zależną od chwili uruchomienia przykładu
	document.write("<br>");
	document.write(compositionEvent1.currentTarget); // null
	document.write("<br>");
	document.write(compositionEvent1.target); // null

	document.write("<br><br>");

	// Tworzymy kolejne zdarzenie
	var compositionEvent2 = new CompositionEvent("piesek", {
		bubbles: true,
		cancelable: true,
		view: window,
		detail: 69,
		data: "husky",
		locale: "pl"
	});

	document.write(compositionEvent2); // [object CompositionEvent]
	document.write("<br>");
	document.write(compositionEvent2.type); // piesek
	document.write("<br>");
	document.write(compositionEvent2.bubbles); // true
	document.write("<br>");
	document.write(compositionEvent2.cancelable); // true
	document.write("<br>");
	document.write(compositionEvent2.view); // [object Window]
	document.write("<br>");
	document.write(compositionEvent2.detail); // 69
	document.write("<br>");
	document.write(compositionEvent2.data); // husky
	document.write("<br>");
	document.write(compositionEvent2.locale); // pl
	document.write("<br>");
	document.write(compositionEvent2.defaultPrevented); // false
	document.write("<br>");
	document.write(compositionEvent2.isTrusted); // false
	document.write("<br>");
	document.write(compositionEvent2.eventPhase); // 0
	document.write("<br>");
	document.write(compositionEvent2.timeStamp); // liczba całkowita z wartością zależną od chwili uruchomienia przykładu
	document.write("<br>");
	document.write(compositionEvent2.currentTarget); // null
	document.write("<br>");
	document.write(compositionEvent2.target); // null

</script>

Na chwilę obecną jedynie przeglądarka Chrome pozwala na wywoływanie interfejsu CompositionEvent w roli konstruktora.

Interfejs Web IDL#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
[Constructor(DOMString typeArg, optional CompositionEventInit compositionEventInitDict)]
interface CompositionEvent : UIEvent {
};

dictionary CompositionEventInit : UIEventInit {
	DOMString data = "";
	DOMString locale = "";
};

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

CompositionEvent (H1) new CompositionEvent() (H2) Składnia (H3) Interfejs Web IDL (H3) Specyfikacje i inne materiały (H3)