Události DOM v JavaScriptu

Toto rozhraní API bylo zastaralé – použijte místo něj rozhraní API MutationObserver!

Mozilla Firefox 7 představil užitečné text-overflow: ellipsis CSS , vynikající metoda dynamického a elegantního zřetězení strun v rámci jejich rodičovských prvků. Firefox se opozdil na text-overflow party, takže sada nástrojů Dojo nabízela dojox.ellipsis , zdroj, který by doplňoval funkčnost elips s iFrame. Při prohlížení dojox.ellipsis kód, zjistil jsem, že tvůrci použili DOMSubtreeModified událost pro překontrolování všech uzlů při změně struktury stránky. Po chvíli pátrání jsem našel celou řadu událostí DOM, které můžete použít ke špehování dokumentu.

Události stromu DOM

Zde jsou události stromu DOM, které můžete poslouchat:

Název události Specifikace Popis
DOMActivate Koncept W3C User agent musí odeslat tuto událost, když je aktivováno tlačítko, odkaz nebo jiný prvek měnící stav. Další podrobnosti najdete v části Aktivační spouštěče a chování. (Zastaráno ve prospěch click )
DOMAttrModified Koncept W3C User agent musí odeslat tuto událost poté, co byla hodnota Attr.value upravena a poté, co byl uzel Attr přidán do prvku nebo byl z něj odebrán.
DOMAttributeNameChanged Koncept W3C User agent musí odeslat tuto událost poté, co byly upraveny namespaceURI a/nebo nodeName uzlu Attr (např. atribut byl přejmenován pomocí Document.renameNode()).
DOMCharacterDataModified Koncept W3C User agent musí odeslat tuto událost poté, co byly CharacterData.data nebo ProcessingInstruction.data upraveny, ale samotný uzel nebyl vložen ani odstraněn.
DOMContentLoaded HTML5
DOMElementNameChanged Koncept W3C User agent musí odeslat tuto událost poté, co byly upraveny namespaceURI a/nebo nodeName uzlu Element (např. prvek byl přejmenován pomocí Document.renameNode()).
DOMFocusIn Koncept W3C Uživatelský agent musí odeslat tuto událost, když cíl události obdrží fokus. Před odesláním tohoto typu události musí být prvek zaměřen. Tento typ události musí být odeslán po zaměření typu události.
DOMFocusOut Koncept W3C User agent musí odeslat tuto událost, když cíl události ztratí fokus. Fokus musí být převzat z prvku před odesláním tohoto typu události. Tento typ události musí být odeslán po rozmazání typu události.
DOMNodeInserted Koncept W3C Uživatelský agent musí odeslat tento typ události, když byl jako podřízený uzel jiného uzlu přidán uzel jiný než uzel Attr. Uživatelský agent může tuto událost odeslat, když byl uzel Attr přidán do uzlu Element (viz poznámka níže). Tato událost musí být odeslána po provedení vložení.
DOMNodeInsertedIntoDocument Koncept W3C Uživatelský agent musí odeslat tuto událost, když byl uzel vložen do dokumentu, buď přímým vložením uzlu nebo vložením podstromu, ve kterém je obsažen; uživatelský agent může volitelně považovat uzel Attr za součást podstromu prvku. Tato událost musí být odeslána po provedení vložení.
DOMNodeRemoved Koncept W3C Uživatelský agent musí odeslat tuto událost, když je ze svého nadřazeného uzlu odstraněn uzel jiný než uzel Attr. Uživatelský agent může odeslat tuto událost, když je uzel Attr odebrán z jeho ownerElement (viz poznámka níže). Tato událost musí být odeslána před odstraněním.
DOMNodeRemovedFromDocument Koncept W3C Uživatelský agent musí odeslat tuto událost, když je uzel odstraněn z dokumentu, buď přímým odstraněním uzlu nebo odstraněním podstromu, ve kterém je obsažen; uživatelský agent může volitelně považovat uzel Attr za součást podstromu prvku. Tato událost musí být odeslána před odstraněním.
DOMSubtreeModified Koncept W3C Toto je obecná událost pro upozornění na všechny změny v dokumentu. Lze jej použít místo specifičtějších událostí názvů mutací a mutací. Může být odeslán po jediné úpravě dokumentu nebo, dle uvážení implementace, po provedení více změn. Druhý případ by měl být obecně použit pro přizpůsobení se více změnám, které se vyskytují buď současně, nebo v rychlém sledu. Cílem této události musí být nejnižší společný rodič změn, ke kterým došlo. Tato událost musí být odeslána poté, co dojde k jakékoli jiné události způsobené mutací.

Tabulka poskytnutá v dokumentaci MDN.

Událost DOM, kterou pravděpodobně poznáte, je DOMContentLoaded, která se používá k signalizaci domready, na kterou jsme všichni zvyklí vidět v našich sadách nástrojů JavaScript. Názvy událostí jsou celkem samozřejmé. Přidání těchto událostí je stejně snadné jako přidání jakéhokoli jiného typu události:

// Notify us when any node within the document is modified, added removed, etc.
document.addEventListener("DOMSubtreeModified", function(e) {
	// Notify of change!
	console.warn("change!", e);
}, false);

// Now create a new element to see what it will look like
var a = document.createElement("a");
document.body.appendChild(a);

/*
	Result:

	{
		ADDITION: 2,
		MODIFICATION: 1,
		REMOVAL: 3,
		attrChange: 0,
		attrName: "", 
		defaultPrevented: false,
		newValue: "",
		prevValue: "",
		relatedNode: null,
		initMutationEvent: initMutationEvent(),
		bubbles: true,
		cancelable: false,
		constructor: MutationEvent { MODIFICATION=1, ADDITION=2, REMOVAL=3},
		currentTarget: Document en,
		eventPhase: 3,
		explicitOriginalTarget: body.home,
		isTrusted: true,
		originalTarget: body.home,
		target: body.home,
		timeStamp: 0,
		type: "DOMSubtreeModified"
	}

*/

Co když chcete poslouchat jednoduché změny uzlů?

// Listen to when an image src or alt gets changed (ex: slideshow, etc.)
document.getElementById("slideshowImage").addEventListener("DOMAttrModified", function(e) {
	// Record the occurrence
	console.warn(e.attrName + " changed from ", e.prevValue," to: ", e.newValue);
}, false);

attrName , prevValue a newValue hodnoty vám řeknou, který atribut se změnil, a jeho předchozí a aktuální hodnoty. Každý typ události má své vlastní vlastnosti události, takže při jejich vytváření experimentujte s událostmi. Vlastnosti události se také můžete dozvědět v seznamu specifikací.

Tyto události DOM je opravdu příjemné zapojit, pokud hledáte úplnou kontrolu nad dokumentem. Je třeba upozornit na to, že jelikož se tyto události mohou spouštět tak často, připojení k nim může být pro vaši aplikaci náročné. Možnost připojit se k nim v případě potřeby je neuvěřitelně užitečná v sofistikované webové aplikaci.