Wydarzenia DOM - DOM events

Zdarzenia DOM (Document Object Model) są sygnałem, że coś się wydarzyło lub coś się dzieje i może być wywołane przez interakcje użytkownika lub przeglądarkę. Języki skryptowe po stronie klienta, takie jak JavaScript , JScript , ECMAScript , VBScript i Java mogą rejestrować różne programy obsługi zdarzeń lub detektory w węzłach elementów wewnątrz drzewa DOM , na przykład w dokumentach HTML , XHTML , XUL i SVG .

Przykłady wydarzeń DOM:

• Gdy użytkownik kliknie myszą
• Po załadowaniu strony internetowej
• Po załadowaniu obrazu
• Gdy mysz porusza się po elemencie
• Gdy pole wejściowe zostanie zmienione
• Po przesłaniu formularza HTML
• Gdy użytkownik naciśnie klawisz

Historycznie, podobnie jak DOM, modele zdarzeń używane przez różne przeglądarki internetowe miały pewne istotne różnice. Spowodowało to problemy ze zgodnością. Aby temu zaradzić, model wydarzenia został ustandaryzowany przez World Wide Web Consortium (W3C) w DOM Level 2.

Wydarzenia

Zdarzenia HTML

Wspólne wydarzenia

Istnieje ogromna kolekcja zdarzeń, które mogą być generowane przez większość węzłów elementów:

• Zdarzenia myszy .
• Zdarzenia klawiatury .
• Zdarzenia ramki/obiektu HTML.
• Zdarzenia formularza HTML.
• Zdarzenia interfejsu użytkownika.
• Zdarzenia mutacji (powiadomienie o wszelkich zmianach w strukturze dokumentu).
• Zdarzenia postępu (używane przez XMLHttpRequest , File API,).

Zauważ, że powyższa klasyfikacja zawodów nie jest dokładnie taka sama jak klasyfikacja W3C.

Zwróć uwagę, że zdarzenia, których nazwy zaczynają się od „DOM”, nie są obecnie dobrze obsługiwane, a z tego i innych powodów wydajnościowych są przestarzałe przez W3C w DOM Level 3. Mozilla i Opera obsługują DOMAttrModified , DOMNodeInserted , DOMNodeRemoved i DOMCharacterDataModified . Chrome i Safari obsługują te zdarzenia, z wyjątkiem DOMAttrModified .

Dotykowe wydarzenia

Przeglądarki internetowe działające na urządzeniach dotykowych , takich jak iOS firmy Apple i Android firmy Google , generują dodatkowe zdarzenia.

W W3C projektu zalecenia, TouchEventdostarcza TouchListz Touchmiejsc, gdy Klawisze modyfikujące , które były aktywny, TouchListz Touchmiejsc w obrębie docelowego elementu DOM, oraz TouchListod Touchmiejsc, które zmieniły się od poprzedniego TouchEvent.

Apple nie dołączył do tej grupy roboczej i opóźnił zalecenie W3C swojej specyfikacji Touch Events, ujawniając patenty na późnym etapie procesu rekomendacji.

Wydarzenia wskaźnikowe

Przeglądarki internetowe na urządzeniach z różnymi typami urządzeń wejściowych, w tym myszą, panelem dotykowym i piórem, mogą generować zintegrowane zdarzenia wejściowe. Użytkownicy mogą zobaczyć, jaki typ urządzenia wejściowego jest wciśnięty, jaki przycisk jest wciśnięty na tym urządzeniu i jak mocno przycisk jest wciskany w przypadku rysika. Od października 2013 to wydarzenie jest obsługiwane tylko przez Internet Explorer 10 i 11.

Wydarzenia związane z niezależnym interfejsem użytkownika

Grupy robocze Indie UI, które jeszcze nie zostały zaimplementowane, chcą pomóc twórcom aplikacji internetowych w obsłudze standardowych zdarzeń interakcji użytkownika bez konieczności obsługi zdarzeń technicznych związanych z różnymi platformami, które mogłyby się z nimi równać.

Skryptowanie użytecznych interfejsów może być trudne, zwłaszcza jeśli weźmie się pod uwagę, że wzorce projektowe interfejsów użytkownika różnią się w zależności od platformy oprogramowania, sprzętu i ustawień regionalnych, oraz że te interakcje można dalej dostosowywać w oparciu o osobiste preferencje. Osoby są przyzwyczajone do sposobu, w jaki interfejs działa w ich własnym systemie, a preferowany przez nich interfejs często różni się od interfejsu preferowanego przez autora aplikacji internetowej.

Na przykład autorzy aplikacji internetowych, którzy chcą przechwycić zamiar użytkownika, aby cofnąć ostatnią akcję, muszą „nasłuchiwać” wszystkich następujących zdarzeń:

• Control+Z w systemach Windows i Linux.
• Command+Z w systemie Mac OS X.
• Potrząśnij wydarzeniami na niektórych urządzeniach mobilnych.

Prościej byłoby nasłuchiwać pojedynczego, znormalizowanego żądania „cofnięcia” poprzedniej akcji.

Wydarzenia związane z Internet Explorerem

Oprócz wspólnych (W3C) zdarzeń, Internet Explorer dodaje dwa główne typy zdarzeń . Niektóre ze zdarzeń zostały zaimplementowane jako de facto standardy przez inne przeglądarki.

• Wydarzenia w schowku .
• Zdarzenia wiązania danych.

Zauważ, że Mozilla, Safari i Opera obsługują również zdarzenie readystatechange dla obiektu XMLHttpRequest . Mozilla obsługuje również zdarzenie beforeunload przy użyciu tradycyjnej metody rejestracji zdarzeń (DOM Level 0). Mozilla i Safari również obsługują menu kontekstowe, ale Internet Explorer dla Mac nie.

Zauważ, że Firefox 6 i nowsze wersje obsługują zdarzenia beforeprint i afterprint.

Wydarzenia XUL

Oprócz wspólnych (W3C) zdarzeń, Mozilla zdefiniowała zestaw zdarzeń, które działają tylko z elementami XUL .

Inne wydarzenia

W przypadku Mozilli i Opery 9 istnieją również nieudokumentowane zdarzenia znane jako DOMContentLoaded i DOMFrameContentLoaded, które są uruchamiane po załadowaniu zawartości DOM. Różnią się one od „load”, ponieważ uruchamiają się przed załadowaniem powiązanych plików (np. obrazów). Jednak DOMContentLoaded został dodany do specyfikacji HTML 5 . Zdarzenie DOMContentLoaded zostało również zaimplementowane w silniku renderującym Webkit build 500+. Odnosi się to do wszystkich wersji Google Chrome i Safari 3.1+. DOMContentLoaded jest również zaimplementowany w przeglądarce Internet Explorer 9 .

Opera 9 obsługuje również zdarzenia Web Forms 2.0 DOMControlValueChanged , invalid , forminput i formchange .

Przebieg wydarzenia

Rozważ sytuację, w której dwa cele zdarzeń uczestniczą w drzewie . Oba mają detektory zdarzeń zarejestrowane dla tego samego typu zdarzenia, powiedz „kliknij”. Gdy użytkownik kliknie na element wewnętrzny, istnieją dwa sposoby na jego obsługę:

• Wyzwalaj elementy od zewnętrznych do wewnętrznych (przechwytywanie zdarzeń). Ten model jest zaimplementowany w Netscape Navigator .
• Wyzwalaj elementy od wewnętrznego do zewnętrznego ( bąbelkowanie zdarzeń ). Ten model jest zaimplementowany w Internet Explorerze i innych przeglądarkach.

W3C zajmuje środkową pozycję w tej walce.

Według W3C zdarzenia przechodzą przez trzy fazy, gdy cel zdarzenia uczestniczy w drzewie:

1. Faza przechwytywania: zdarzenie przemieszcza się w dół od głównego celu zdarzenia do celu zdarzenia
2. Faza docelowa: zdarzenie przechodzi przez cel zdarzenia
3. Faza bąbelkowa ( opcjonalnie ): zdarzenie powraca z miejsca docelowego zdarzenia do głównego celu zdarzenia. Faza bąbelków będzie miała miejsce tylko w przypadku wydarzeń, w których bąbelki (gdzie event.bubbles == true)

Wizualizację tego przepływu zdarzeń można znaleźć na https://domevents.dev

Zatrzymywanie wydarzeń

Gdy wydarzenie przechodzi przez detektory zdarzeń, wydarzenie można zatrzymać za pomocą event.stopPropagation()lubevent.stopImmediatePropagation()

• event.stopPropagation(): zdarzenie jest zatrzymywane po zakończeniu wszystkich detektorów zdarzeń dołączonych do bieżącego celu zdarzenia w bieżącej fazie zdarzenia
• event.stopImmediatePropagation(): zdarzenie jest natychmiast zatrzymywane i nie są wykonywane żadne dalsze detektory zdarzeń

Kiedy wydarzenie zostanie zatrzymane, nie będzie już podróżować po ścieżce wydarzenia. Zatrzymanie wydarzenia nie anuluje wydarzenia.

Starsze mechanizmy zatrzymujące wydarzenie

• Ustawić event.cancelBubblena true(Internet Explorer)
• Ustaw event.returnValuewłaściwość nafalse

Anulowanie wydarzeń

cancelableZdarzenie może zostać anulowane przez wywołanie event.preventDefault(). Anulowanie wydarzenia spowoduje rezygnację z domyślnego zachowania przeglądarki dla tego wydarzenia. Gdy wydarzenie zostanie anulowane, event.defaultPreventedwłaściwość zostanie ustawiona na true. Anulowanie wydarzenia nie powstrzyma wydarzenia przed podróżowaniem po ścieżce wydarzenia.

Obiekt zdarzenia

Obiekt Event dostarcza wiele informacji o konkretnym zdarzeniu, w tym informacje o elemencie docelowym, wciśniętym klawiszu, wciśniętym przycisku myszy, pozycji myszy itp. Niestety w tym obszarze występują bardzo poważne niezgodności przeglądarek. Dlatego w tym artykule omówiono tylko obiekt zdarzenia W3C.

Modele obsługi imprez

DOM Poziom 0

Ten model obsługi zdarzeń został wprowadzony przez Netscape Navigator i od 2005 r. pozostaje najczęściej używanym modelem w różnych przeglądarkach. Istnieją dwa typy modeli: model wbudowany i model tradycyjny.

Model wbudowany

W modelu wbudowanym procedury obsługi zdarzeń są dodawane jako atrybuty elementów. W poniższym przykładzie po kliknięciu hiperłącza pojawia się okno dialogowe alertu z komunikatem „Hej Joe” . Domyślna akcja kliknięcia jest anulowana przez zwrócenie wartości false w obsłudze zdarzeń.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Inline Event Handling</title>
</head>
<body>

	<h1>Inline Event Handling</h1>

	<p>Hey <a href="http://www.example.com" onclick="triggerAlert('Joe'); return false;">Joe</a>!</p>

	<script>
		function triggerAlert(name) {
			window.alert("Hey " + name);
		}
	</script>
</body>
</html>

Jednym z powszechnych nieporozumień dotyczących modelu inline jest przekonanie, że umożliwia on rejestrację obsługi zdarzeń z niestandardowymi argumentami, np. namew triggerAlertfunkcji. Choć może się wydawać, że tak jest w powyższym przykładzie, tak naprawdę dzieje się tak, że silnik JavaScript przeglądarki tworzy anonimową funkcję zawierającą oświadczenia w onclickatrybucie. Program onclickobsługi elementu byłby powiązany z następującą anonimową funkcją:

function () {
	triggerAlert('Joe');
	return false;
}

To ograniczenie modelu zdarzeń JavaScript jest zwykle przezwyciężane przez przypisanie atrybutów do obiektu funkcji procedury obsługi zdarzeń lub przez użycie closures .

Model tradycyjny

W tradycyjnym modelu programy obsługi zdarzeń mogą być dodawane lub usuwane przez skrypty. Podobnie jak w przypadku modelu wbudowanego, każde zdarzenie może mieć zarejestrowany tylko jeden program obsługi zdarzeń. Zdarzenie jest dodawane przez przypisanie nazwy procedury obsługi do właściwości zdarzenia obiektu elementu. Aby usunąć procedurę obsługi zdarzeń, po prostu ustaw właściwość na null:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Traditional Event Handling</title>
</head>

<body>
	<h1>Traditional Event Handling</h1>
	
	<p>Hey Joe!</p>

	<script>
		var triggerAlert = function () {
			window.alert("Hey Joe");
		};
		
		// Assign an event handler
		document.onclick = triggerAlert;
		
		// Assign another event handler
		window.onload = triggerAlert;
		
		// Remove the event handler that was just assigned
		window.onload = null;
	</script>
</body>
</html>

Aby dodać parametry:

var name = 'Joe';
document.onclick = (function (name) {
	return function () {
		alert('Hey ' + name + '!');
	};
}(name));

Funkcje wewnętrzne zachowują swój zakres .

DOM Poziom 2

W3C zaprojektowało bardziej elastyczny model obsługi zdarzeń w DOM Level 2.

Kilka przydatnych rzeczy, które warto wiedzieć:

• Aby zapobiec propagacji zdarzenia, programiści muszą wywołać stopPropagation()metodę obiektu zdarzenia.
• Aby zapobiec wywołaniu domyślnej akcji zdarzenia, programiści muszą wywołać preventDefault()metodę obiektu zdarzenia.

Główną różnicą w stosunku do modelu tradycyjnego jest to, że dla tego samego zdarzenia można zarejestrować wiele programów obsługi zdarzeń. useCaptureOpcja może być również używany do określenia, że procedura obsługi powinny być nazywane w fazie przechwytywania zamiast fazie propagacji. Model ten jest obsługiwany przez Mozillę , Operę , Safari , Chrome i Konquerora .

Przepisanie przykładu używanego w tradycyjnym modelu

<!doctype html>
<html lang="en">
<head>
     <meta charset="utf-8">
     <title>DOM Level 2</title>
</head>

<body>
     <h1>DOM Level 2</h1>
     
     <p>Hey Joe!</p>
     
     
     <script>
          var heyJoe = function () {
               window.alert("Hey Joe!");
          }
          
          // Add an event handler
          document.addEventListener( "click", heyJoe, true );  // capture phase
          
          // Add another event handler
          window.addEventListener( "load", heyJoe, false );  // bubbling phase
          
          // Remove the event handler just added
          window.removeEventListener( "load", heyJoe, false );
     </script>

</body>
</html>

Model specyficzny dla przeglądarki Internet Explorer

Microsoft Internet Explorer przed wersją 8 nie jest zgodny z modelem W3C, ponieważ jego własny model został stworzony przed ratyfikacją standardu W3C. Internet Explorer 9 podąża za zdarzeniami DOM poziomu 3, a Internet Explorer 11 usuwa obsługę modelu specyficznego dla firmy Microsoft.

Kilka przydatnych rzeczy, które warto wiedzieć:

• Aby zapobiec propagacji zdarzenia, programiści muszą ustawić właściwość zdarzenia cancelBubble.
• Aby zapobiec wywoływaniu domyślnej akcji zdarzenia, programiści muszą ustawić właściwość zdarzenia returnValue.
• Słowo thiskluczowe odnosi się do windowobiektu globalnego .

Ponownie ten model różni się od modelu tradycyjnego tym, że dla tego samego zdarzenia można zarejestrować wiele programów obsługi zdarzeń. Jednak useCaptureopcja nie może być użyta do określenia, że ​​handler powinien być wywoływany w fazie przechwytywania. Model ten jest obsługiwany przez przeglądarki oparte na Microsoft Internet Explorer i Trident (np. Maxthon , Avant Browser ).

Przepisanie przykładu używanego w starym modelu specyficznym dla Internet Explorera

<!doctype html>
<html lang="en">
<head>
     <meta charset="utf-8">
     <title>Internet Explorer-specific model</title>
</head>
<body>
     <h1>Internet Explorer-specific model</h1>

     <p>Hey Joe!</p>

     <script>
          var heyJoe = function () {
               window.alert("Hey Joe!");
          }
          
          // Add an event handler
          document.attachEvent("onclick", heyJoe);
          
          // Add another event handler
          window.attachEvent("onload", heyJoe);
          
          // Remove the event handler just added
          window.detachEvent("onload", heyJoe);
     </script>

</body>
</html>

Bibliografia

• Deitela, Harveya. (2002). Internet i World Wide Web: jak programować (wydanie drugie). ISBN  0-13-030897-8
• Organizacja Mozilli. (2009). Dokumentacja zdarzeń DOM . Źródło 25 sierpnia 2009.
• Dziwaczny tryb (2008). Tabele zgodności zdarzeń . Źródło 27 listopada 2008.
• http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Zewnętrzne linki

• Specyfikacja Zdarzeń Poziomu 2 Document Object Model (DOM)
• Document Object Model (DOM) Poziom 3 Zdarzenia Wersja robocza
• DOM4: Wydarzenia (wersja robocza redaktora)
• Wersja robocza zdarzeń interfejsu użytkownika
• Pointer Events Rekomendacja kandydata W3C
• Zdarzenie wskaźnika MSDN
• domevents.dev - wizualizator do poznawania zdarzeń DOM poprzez eksplorację
• JS skrzypce do tworzenia pęcherzyków i przechwytywania zdarzeń

Bibliografia