MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Więcej funkcji obsługi zdarzeń

W tym artykule, badana jest postać obiektu zdarzenia oraz opisane są dodatkowe zdarzenia.

Obiekt zdarzenia

Każda obsługa zdarzeń posiada pojedynczy argument, który przetrzymuje obiekt zdarzenia. W postaci atrybutu nasłuchu, zdarzenie jest argumentem kodu skryptu, do którego można się odnosić poprzez używanie nazwy 'event'. Natomiast w funkcji addEventListener, pierwszy argument będzie obiektem zdarzenia. Ten obiekt zdarzenia, posiada pewną liczbę własności, które mogą być badane w trakcie trwania zdarzenia. Pełną listę własności można znaleźć w dokumentacji obiektu na XULPlanet].

Mieliśmy już okazję oglądać własność target zdarzenia w poprzedniej sekcji. Zawiera ona odnośnik do elementu, w którym pojawiło się zdarzenie. Podobną własnością jest currentTarget, która zawiera element, którego nasłuch jest aktualnie obsługiwany. W poniższym przykładzie, currentTarget zawsze wskazuje na vbox, natomiast własność target będzie przechowywała specyficzny element: przycisk lub pole wyboru, które zostały aktywowane.

Przykład 1 : Źródła Podgląd

<vbox oncommand="alert(event.currentTarget.tagName);">
  <button label="OK"/>
  <checkbox label="Pokaż obrazki"/>
</vbox>

Zatrzymanie propagowania zdarzenia

Przypomnijmy, że faza przejęcia ma miejsce przed fazą wrzenia, więc jakikolwiek "listener" należący do tej pierwszej będzie wyzwalany przed nasłuchem drugiej. Jeśli zdarzenie odnoszące się do fazy przejęcia, zatrzyma swoją propagację, żaden z późniejszych "listenerów", tak tych należących do fazy przejęcia, jak i wrzenia nie otrzyma powiadomienia o zdarzeniu. W celu zatrzymania propagacji zdarzenia, wystarczy wywołać metodę stopPropagation należącą do obiektu zdarzenia. Przykład tego wywołania poniżej:

Przykład 2 : Źródła Podgląd

<hbox id="outerbox">
  <button id="okbutton" label="OK"/>
</hbox>

<script>
function buttonPressed(event){
  alert('Przycisk został naciśnięty!');
}

function boxPressed(event){
  alert('Pudełko zostało naciśnięte!');
  event.stopPropagation();
}

var button = document.getElementById("okbutton");
button.addEventListener('command',buttonPressed,true);

var outerbox = document.getElementById("outerbox");
outerbox.addEventListener('command',boxPressed,true);
</script>

W tym przypadku, nasłuch zdarzenia został dodany do przycisku, a inny nasłuch został dodany do ramki. Metoda stopPropagation została wywołana w "listenerze" ramki, więc "listener" przycisku nigdy nie zostanie wywołany. Jeśli to wywołanie zostało usunięte, oba "listenery" będą wywoływane, co spowoduje pojawienie się obu alertów.

Zapobieganie domyślnym akcją

Jeśli żadna obsługa wydarzenia nie została zarejestrowani dla wydarzenia, to po zakończeniu fazy przejęcia i wrzenia, element obsłuży zdarzenie w sposób domyślny. Co się stanie zależy od zdarzenia i typu samego elementu. Przykładowo, zdarzenie "popupshowing" jest wysyłane do "popupa" chwilę przed jego wyświetleniem. Domyślną akcją jest wyświetlenie "popupa". Jeśli coś zapobiegnie akcji domyślnej, "popup" nie zostanie wyświetlony. Domyślnej akcji możemy zapobiec dzięki znajdującej się w obiekcie zdarzenia metodzie preventDefault. Przykład jej zastosowania poniżej.

Przykład 3 : Źródła Podgląd

<button label="Types" type="menu">
  <menupopup onpopupshowing="event.preventDefault();">
    <menuitem label="Glass"/>
    <menuitem label="Plastic"/>
  </menupopup>
</button>

Zauważmy, że zapobieganie domyślnym akcjom, to nie to samo co zatrzymywanie propagacji zdarzenia przy użyciu metody stopPropagation. Nawet w przypadku kiedy zapobiegnięto domyślnej akcji, zdarzenie będzie nadal kontynuowało swoją propagację. Podobnie, wywoływanie metody stopPropagation, nie zapobiegnie domyślnej akcji. W celu zatrzymania przed zajściem obu tych akcji, należy wywołać obie powyższe metody.

Warto zaznaczyć, że kiedy zapobiegniemy propagacji lub akcji domyślnej, żadna z nich nie będzie w już stanie być uruchomiona ponownie dla danego wydarzenia.

The following sections list some of the events that may be used. A full list is provided in the XULPlanet event reference.

Zdarzenia myszy

Jest tu kilka zdarzeń, które mogą być użyte do obsługi myszki i jej określonych akcji, które są opisane pokrótce poniżej:

click 
Wywoływany, kiedy przycisk myszy zostanie naciśnięty i zwolniony nad elementem.
dblclick 
Wywoływana, kiedy przycisk myszy zostanie naciśnięty dwukrotnie.
mousedown 
Wywoływana, kiedy przycisk myszy jest naciśnięty nad elementem. Obsługa zdarzenia będzie wywoływana jak tylko przycisk zostanie naciśniety, nawet jeśli nie został jeszcze zwolniony.
mouseup 
Wywoływana, kiedy przycisk myszy zostanie zwolniony na elemencie.
mouseover 
Wywoływana kiedy wskaźnik myszy zostanie przeniesiony nad element. Można ją wykorzystywać w celu podświetlania elementu, jednakże CSS umożliwia to automatycznie, więc lepiej nie wykonywać tego z pomocą zdarzeń. Można jednak, wykorzystywać to do wyświetlania tekstu pomocy w pasku statusu.
mousemove 
Wywoływana, kiedy wskaźnik myszy zostanie poruszony nad elementem. Zdarzenie to może być wywoływane wiele razy, w chwili w której użytkownik porusza myszą, więc należy

unikać obsługi nią długotrwałych zadań.

mouseout 
Wywoływana, kiedy wskaźnik myszy rozstanie przesunięty poza element. Można to wykorzystać do usunięcia podświetlenia elementu lub usunięcia tekstu pomocy paska statusu.

There are also a set of drag related events, which occur when the user holds down a mouse button and drags the mouse around. Those events are described in Przeciągnij i upuść.

Istnieje także zestaw zdarzeń związanych z funkcja drag, które mają miejsce w chwili kiedy, użytkownik przytrzymując wciśnięty przycisk myszy ciągnie (drag) mysz. Zostaną one opisane w późniejszej sekcji związanej z funkcjami drag i drop.

Własności zdarzenia przycisku myszy

Kiedy zachodzą zdarzenia związane z przyciskiem myszy, mamy dostęp do różnego typu dodatkowych własności, które są w stanie określić który przycisk myszy został wciśnięty lub dokładną lokalizację miejsca w którym znajduje się wskaźnik myszy. Własności zdarzenia związanego z przyciskiem, mogą zostać użyte w celu określenia, który przycisk został wciśnięty, gdzie dostępne wartości to 0 dla lewego przycisku, 1 dla prawego i 2 dla środkowego. Jeśli mysz jest skonfigurowana inaczej, wartości mogą się zmienić.

Szczegółowe własności (detail) przechowują wartość mówiącą, ile razy przycisk został szybko wciśnięty w pewnej sekwencji. Pozwala to sprawdzić czy przycisk został raz, dwa lub trzy razy wciśnięty. Oczywiście, jeśli chcesz tylko sprawdzić podwójne kliknięcia można użyć w zastępstwie zdarzenia dblclick. Zdarzenie wciśnięcia będzie uruchamiane w chwili pierwszego wciśnięcia przycisku, jak również drugiego oraz trzeciego. Zdarzenie dblclick natomiast, będzie uruchamiane jednorazowo dla podwójnego wciśnięcia przycisku myszy.

Własności przycisku oraz własności detail stosują się tylko do obsługi zdarzeń powiązanych z przyciskami myszy, a nie jej ruchem. Dla zdarzeń związanych z ruchem myszy, obie własności będą miały wartość 0.

Własności zdarzenia pozycji myszy

Jednak, wszystkie zdarzenia związane z obsługą myszy, będą posiadały dołączone własności przetrzymujące położenie myszy, w chwili zajścia zdarzenia. Istnieją dwa zestawy kordynatów położenia. Pierwszy to własności screenX i screenY i są w odniesieniu do lewego, górnego rogu ekranu. Drugi zestaw, clientX i clientY, istnieją w odniesieniu do lewego, górnego rogu dokumentu. Poniżej pokazany jest przykład wyświetlający aktualne położenie myszy:

Przykład 4 : Źródła Podgląd

<script>

function updateMouseCoordinates(event){
  var text = "X:" + event.clientX + " Y:" + event.clientY;
  document.getElementById("xy").value = text;
}
</script>

<label id="xy"/>
<hbox width="400" height="400" onmousemove="updateMouseCoordinates(event);"/>

W tym przykładzie, rozmiar ramki został wyspecyfikowany, w celu podkreślenia efektu. Obsługa zdarzenia pobiera własności clientX i clientY, a następnie tworzy dla nich string. Ten string jest przypisany do własności value danej etykiety. Warto zaznaczyć, że argument zdarzenia musi być przekazany do funkcji updateMouseCoordinates. Jeśli poruszysz szybko myszą, nad granicą ramki możesz zauważyć, że wartości położenia nie zatrzymują się idealnie na wartości 400. Jest to spowodowane zdarzeniem mousemove, które pojawia się w pewnym odstępie czasu po przekroczeniu granicy. Im szybciej poruszała się mysz tym większa będzie różnica między teoretycznie poprawną wartością, a tym co zwrócą nam wartości clientX i clientY.

Element Relative Coordinates

W większości przypadków będziemy woleli pobrać koordynaty zdarzenia w odniesieniu do elementu, nie zaś całego okna. Wartości te można otrzymać poprzez, odjęcie pozycji elementu od pozycji zdarzenia. Przykład poniżej.

var element = event.target;
var elementX = event.clientX - element.boxObject.x;
var elementY = event.clientY - element.boxObject.y;

Elementy XUL posiadają obiekty ramek, które mogą być odzyskiwane za pomocą własności boxObject. Więcej informacji na ten temat znajdziemy w kolejnej sekcji, jednak co warto powiedzieć już teraz to, że wspomniana własność przechowuje informacje określającą jak wyświetlany jest element, włączając jego koordynaty x i y. W poniższym przykładzie, wspomniane koordynaty zostaję odjęte od koordynatów zdarzenia. Operacja ta daje nam pozycję zdarzenia w odniesieniu do elementu.

Zdarzenia wczytywania

Zdarzenie wczytywania jest wysyłane do dokumentu (znacznika window), kiedy tylko plik XUL zakończy wczytywanie i zaraz przed wyświetleniem zawartości. To zdarzenie jest bardzo często używane do inicjacji pól i wykonywania innych zadań które wymagają być zrobione przed tym jak użytkownik będzie używał okna. Należy używać zdarzenia wczytywania, aby wykonywać tego typu rzeczy dodając skrypt na górnym poziomie na zewnątrz funkcji. Wymagane to jest ze względu na to że elementy XUL mogą być jeszcze niewczytane lub nie w pełni zainicjowane, ze względu na co niektóre rzeczy mogą nie działać tak jak powinny. W celu użycia zdarzenia wczytywania, umieść atrybut onload w znaczniku window. Wywołaj kod wewnątrz obsługi zdarzenia wczytywania, który zainicjuje potrzebny interfejs.

Istnieją także zdarzenia przeciwne do wczytywania (unload), które są wywoływane w trakcie zamykania okna lub w kontekście przeglądarki, kiedy strona jest przełączana na kolejny adres URL. Możemy wykorzystywać to zdarzenie do zapisania jakichkolwiek informacji.

W następnym artykule dowiemy się jak dodać dodawać skróty klawiaturowe.

Autorzy i etykiety dokumentu

Etykiety: 
 Autorzy tej strony: fscholz, teoli, Mgjbot, Ptak82, Sadek
 Ostatnia aktualizacja: fscholz,