Události DOM - DOM events

Tento článek má několik problémů. Prosím pomozte vylepši to nebo diskutovat o těchto problémech na internetu diskusní stránka. (Zjistěte, jak a kdy tyto zprávy ze šablony odebrat) tento článek je napsán jako manuál nebo průvodce. Prosím pomozte přepište tento článek z popisného, neutrální hlediskoa odstranit rady nebo pokyny. (Července 2018) (Zjistěte, jak a kdy odstranit tuto zprávu šablony) tento článek může být pro většinu čtenářů příliš technická na to, aby je pochopili. Prosím pomozte to vylepšit na aby to bylo srozumitelné pro neodborníky, aniž by byly odstraněny technické podrobnosti. (Července 2018) (Zjistěte, jak a kdy odstranit tuto zprávu šablony) (Zjistěte, jak a kdy odstranit tuto zprávu šablony)

Události DOM (Document Object Model) jsou akce, ke kterým dochází v důsledku akce uživatele nebo v důsledku změny stavu prvků a DOM strom. Na straně klienta skriptovací jazyky jako JavaScript, JScript, ECMAScript, VBScript, a Jáva lze zaregistrovat různé obsluhy událostí nebo posluchači na uzlech prvků uvnitř a DOM strom, například v HTML, XHTML, XUL, a SVG dokumenty.

Příklady událostí HTML DOM:

• Když uživatel klikne myší
• Když je načtena webová stránka
• Když byl načten obrázek
• Když se myš pohybuje nad prvkem
• Při změně vstupního pole
• Při odeslání formuláře HTML
• Když uživatel stiskne klávesu^[1]

Historicky, jako DOM, modely událostí používané různými internetové prohlížeče měl některé významné rozdíly. To způsobilo problémy s kompatibilitou. V boji proti tomu model události standardizoval World Wide Web Consortium (W3C) v DOM úrovni 2.

Události

Události HTML

Společné akce

Existuje velká sbírka událostí, které lze generovat většinou uzlů prvků:

• Myš Události.^[2][3]
• Klávesnice Události.
• Události rámce / objektu HTML.
• Události ve formátu HTML.
• Události uživatelského rozhraní.
• Události mutace (oznámení o jakýchkoli změnách struktury dokumentu).
• Pokrokové události^[4] (používá XMLHttpRequest, File API,^[5]).

Všimněte si, že výše uvedená klasifikace událostí není úplně stejná jako klasifikace W3C.

Všimněte si, že události, jejichž názvy začínají řetězcem „DOM“, nejsou aktuálně dobře podporovány, a z tohoto a dalších důvodů výkonu je W3C v úrovni DOM 3 zastaralá. Mozilla a Opera Podpěra, podpora DOMAttrModified, DOMNodeVloženo, DOMNodeOdstraněno a DOMCharacterDataModified. Chrome a Safari podporovat tyto události, s výjimkou DOMAttrModified.

Dotkněte se událostí

Webové prohlížeče běží dotykové zařízení, například Apple iOS a Google Android, generovat další události.^[8]:§5.3

V W3C návrh doporučení, a TouchEvent dodává a TouchList z Dotek umístění, modifikační klávesy které byly aktivní, a TouchList z Dotek umístění v cíleném prvku DOM a TouchList z Dotek umístění, která se od předchozího změnila TouchEvent.^[8]

Jablko se nepřipojil k této pracovní skupině a zveřejněním odložil doporučení W3C ohledně jeho specifikace dotykových událostí patenty pozdě v procesu doporučení.^[9]

Události ukazatele^[10]

Webové prohlížeče na zařízeních s různými typy vstupních zařízení, včetně myši, dotykového panelu a pera, mohou generovat integrované vstupní události. Uživatelé mohou vidět, jaký typ vstupního zařízení je stisknut, jaké tlačítko je na tomto zařízení stisknuto a jak silně je tlačítko stisknuto, pokud jde o pero. Od října 2013 je tato událost podporována pouze v prohlížečích Internet Explorer 10 a 11.

Události uživatelského rozhraní Indie^[11]

Dosud není skutečně implementováno, pracovní skupiny uživatelského rozhraní Indie chtějí pomoci vývojářům webových aplikací, aby mohli podporovat standardní události interakce s uživateli, aniž by museli zpracovávat různé technické události specifické pro platformu, které by se s nimi mohly shodovat.

Skriptování použitelných rozhraní může být obtížné, zvláště když se vezme v úvahu, že návrhové vzory uživatelského rozhraní se liší mezi softwarovými platformami, hardwarem a národními prostředími a že tyto interakce lze dále přizpůsobit na základě osobních preferencí. Jednotlivci jsou zvyklí na to, jak rozhraní funguje na jejich vlastním systému, a jejich preferované rozhraní se často liší od rozhraní preferovaného autorem webové aplikace.

Například autoři webových aplikací, kteří chtějí zachytit záměr uživatele vrátit zpět poslední akci, musí „poslouchat“ všechny následující události:

• Control + Z ve Windows a Linux.
• Command + Z v systému Mac OS X.
• Potřesení událostí na některých mobilních zařízeních.

Bylo by jednodušší poslouchat jediný normalizovaný požadavek na „vrácení“ předchozí akce.

Události specifické pro Internet Explorer

Kromě běžných (W3C) událostí přidává dva hlavní typy událostí internet Explorer. Některé z akcí byly implementovány jako de facto standardy jinými prohlížeči.

• Schránka Události.
• Události vázání dat.^{[je zapotřebí objasnění ]}

Všimněte si, že Mozilla, Safari a Opera také podporují událost readystatechange pro XMLHttpRequest objekt. Mozilla také podporuje událost beforeunload pomocí tradiční metody registrace události (DOM úroveň 0). Mozilla a Safari také podporují kontextovou nabídku, ale Internet Explorer pro Mac nikoli.

Upozorňujeme, že Firefox 6 a novější podporují události před tiskem a následným tiskem.

XUL události

Kromě běžných událostí (W3C) definovala Mozilla sadu událostí, které fungují pouze s XUL elementy.^{[Citace je zapotřebí ]}

Další akce

Pro Mozillu a Opera 9 existují také nezdokumentované události známé jako DOMContentLoaded a DOMFrameContentLoaded které se spustí při načtení obsahu DOM. Liší se od „načtení“, protože se spouští před načtením souvisejících souborů (např. Obrázků). DOMContentLoaded však byl přidán do HTML 5 Specifikace.^[12]Událost DOMContentLoaded byla také implementována v Webkit vykreslování sestavení motoru 500+.^[13][14] To koreluje se všemi verzemi Google Chrome a Safari 3.1+. DOMContentLoaded je také implementován v Internet Explorer 9.^[15]

Opera 9 také podporuje události Web Forms 2.0 DOMControlValueChanged, neplatný, vstup a výměna formulářů.

Tok událostí

Zvažte situaci, kdy jsou 2 prvky vnořené společně. Oba mají obslužné rutiny událostí registrované pro stejný typ události, řekněme „klikni“. Když uživatel klikne na vnitřní prvek, existují dva možné způsoby, jak s ním zacházet:

• Spustit prvky z vnějšího na vnitřní (zachycení události). Tento model je implementován v Netscape Navigator.
• Spustit prvky z vnitřního na vnější (probublávání událostí ). Tento model je implementován v prohlížeči Internet Explorer a dalších prohlížečích.^[16]

W3C zaujímá v tomto boji střední pozici.^[17]:§1.2 Události jsou nejprve zachyceny, dokud nedosáhne cílového prvku, a poté probublávají. Během toku události lze na událost reagovat na kterémkoli prvku v cestě (pozorovatel) v kterékoli fázi vyvoláním akce a / nebo zastavením události (metodou event.stopPropagation () pro prohlížeče a příkazy vyhovující standardu W3C event.cancelBubble = true pro Internet Explorer) a / nebo zrušením výchozí akce pro událost.

Objekt události

Objekt Událost poskytuje mnoho informací o konkrétní události, včetně informací o cílovém prvku, stisknutém tlačítku, stisknutém tlačítku myši, poloze myši atd. V této oblasti bohužel existují velmi závažné nekompatibility prohlížeče. Proto je v tomto článku popsán pouze objekt události W3C.

Modely zpracování událostí

DOM úrovně 0

Tento model zpracování událostí představil Netscape Navigator a zůstává nejmodernějším modelem pro různé prohlížeče od roku 2005^{[Aktualizace]}.^{[Citace je zapotřebí ]} Existují dva typy modelů: vložený model a tradiční model.

Vložený model

V inline modelu^[19] obslužné rutiny událostí jsou přidány jako atributy prvků. V níže uvedeném příkladu an výstražné dialogové okno se zprávou „Hey Joe“ se objeví po hypertextový odkaz je kliknuto. Výchozí akce kliknutí se zruší vrácením false v obslužné rutině události.

<!doctype html><html jazyk=„cs“><hlava>	<meta znaková sada="utf-8">	<titul>Inline zpracování událostí</titul></hlava><tělo>	<h1>Inline zpracování událostí</h1>	<str>Ahoj <A href=„http://www.example.com“ při kliknutí="triggerAlert ('Joe'); return false;">Joe</A>!</str>	<skript>		funkce triggerAlert(název) {			okno.výstraha("Ahoj " + název);		}	</skript></tělo></html>

Jedna běžná mylná představa^{[Citace je zapotřebí ]} s vloženým modelem je víra, že umožňuje registraci obslužných rutin událostí s vlastními argumenty, např. název v triggerAlert funkce. I když se může zdát, že tomu tak je ve výše uvedeném příkladu, ve skutečnosti se děje to, že JavaScriptový engine prohlížeče vytvoří anonymní funkce obsahující prohlášení v při kliknutí atribut. The při kliknutí obslužná rutina prvku by byla vázána na následující anonymní funkci:

funkce () {	triggerAlert('Joe');	vrátit se Nepravdivé;}

Toto omezení modelu události JavaScriptu je obvykle překonáno přiřazením atributů k funkčnímu objektu obslužné rutiny události nebo použitím uzávěry.

Tradiční model

V tradičním modelu^[20] obslužné rutiny událostí lze přidávat nebo odebírat skripty. Stejně jako vložený model může mít každá událost zaregistrovanou pouze jednu obslužnou rutinu události. Událost je přidána přiřazením názvu obslužné rutiny vlastnosti události objektu prvku. Chcete-li odebrat obslužnou rutinu události, jednoduše nastavte vlastnost na null:

<!doctype html><html jazyk=„cs“><hlava>	<meta znaková sada="utf-8">	<titul>Tradiční zpracování událostí</titul></hlava><tělo>	<h1>Tradiční zpracování událostí</h1>		<str>Ahoj Joe!</str>	<skript>		var triggerAlert = funkce () {			okno.výstraha(„Hej Joe“);		};				// Přiřaďte obslužnou rutinu události		dokument.při kliknutí = triggerAlert;				// Přiřadit další obslužnou rutinu události		okno.onload = triggerAlert;				// Odebrání obslužné rutiny události, která byla právě přiřazena		okno.onload = nula;	</skript></tělo></html>

Přidání parametrů:

var název = 'Joe';dokument.při kliknutí = (funkce (název) {	vrátit se funkce () {		výstraha('Ahoj ' + název + '!');	};}(název));

Vnitřní funkce zachovávají jejich rozsah.

DOM úrovně 2

W3C navrhl pružnější model zpracování událostí v DOM úrovni 2.^[17]

Několik užitečných věcí, které byste měli vědět:

• Aby vývojáři nebublili, musí vývojáři zavolat na stopPropagation () metoda objektu události.
• Aby se zabránilo výchozí akci události, která má být volána, musí vývojáři zavolat preventDefault () metoda objektu události.

Hlavní rozdíl od tradičního modelu spočívá v tom, že pro stejnou událost lze zaregistrovat více obslužných rutin událostí. The useCapture Možnost lze také použít k určení, že obslužná rutina by měla být volána ve fázi zachycení místo fáze probublávání. Tento model podporuje Mozilla, Opera, Safari, Chrome a Konqueror.

Přepis příkladu použitého v tradičním modelu

<!doctype html><html jazyk=„cs“><hlava>     <meta znaková sada="utf-8">     <titul>DOM úrovně 2</titul></hlava><tělo>     <h1>DOM úrovně 2</h1>          <str>Ahoj Joe!</str>               <skript>          var hej jo = funkce () {               okno.výstraha(„Ahoj Joe!“);          }                    // Přidat obslužnou rutinu události          dokument.addEventListener( „kliknout“, hej jo, skutečný );  // fáze zachycení                    // Přidat další obslužnou rutinu události          okno.addEventListener( "zatížení", hej jo, Nepravdivé );  // probublávací fáze                    // Odebrání právě přidaného obslužného programu události          okno.removeEventListener( "zatížení", hej jo, Nepravdivé );     </skript></tělo></html>

Specifický model pro Internet Explorer

Microsoft Internet Explorer před verzí 8 nenásleduje model W3C, protože jeho vlastní model byl vytvořen před ratifikací standardu W3C. Internet Explorer 9 sleduje události DOM úrovně 3,^[21] a Internet Explorer 11 ruší podporu pro model specifický pro Microsoft.^[22]

Několik užitečných věcí, které byste měli vědět:

• Aby vývojáři nebublili, musí vývojáři událost nastavit cancelBubble vlastnictví.
• Aby se zabránilo výchozí akci události, která má být volána, vývojáři musí nastavit událost návratová hodnota vlastnictví.
• The tento klíčové slovo odkazuje na globální okno objekt.

Opět se tento model liší od tradičního modelu v tom, že pro stejnou událost lze zaregistrovat více obslužných rutin událostí. Nicméně useCapture Možnost nelze použít k určení, že obslužná rutina by měla být volána ve fázi zachycení. Tento model je podporován společností Microsoft internet Explorer a Prohlížeče založené na trojzubci (např. Maxthon, Prohlížeč Avant ).

Přepis příkladu použitého ve starém modelu specifickém pro Internet Explorer

<!doctype html><html jazyk=„cs“><hlava>     <meta znaková sada="utf-8">     <titul>Specifický model pro Internet Explorer</titul></hlava><tělo>     <h1>Specifický model pro Internet Explorer</h1>     <str>Ahoj Joe!</str>     <skript>          var hej jo = funkce () {               okno.výstraha(„Ahoj Joe!“);          }                    // Přidat obslužnou rutinu události          dokument.attachEvent("při kliknutí", hej jo);                    // Přidat další obslužnou rutinu události          okno.attachEvent("onload", hej jo);                    // Odebrání právě přidaného obslužného programu události          okno.detachEvent("onload", hej jo);     </skript></tělo></html>

Reference

• Deitel, Harvey. (2002). Internet a World Wide Web: jak programovat (Druhé vydání). ISBN  0-13-030897-8
• Organizace Mozilla. (2009). Reference události DOM. Citováno 25. srpna 2009.
• Quirksmode (2008). Tabulky kompatibility událostí. Citováno 27. listopadu 2008.
• http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

externí odkazy

• Specifikace událostí úrovně 2 dokumentu Object Model (DOM)
• Události pracovního dokumentu událostí modelu modelu (DOM) úrovně 3
• DOM4: Události (návrh redakce)
• Pracovní koncept událostí uživatelského rozhraní
• Pointer Events W3C Candidate Doporučení
• MSDN PointerEvent
• JS housle pro bublání a zachycování událostí

Reference