MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Dodawanie funkcji obsługi zdarzeń

Jak dotąd, okno dialogowe Znajdź pliki wygląda całkiem dobrze. Nie oczyściliśmy go za bardzo, ale za to łatwo stworzony został prosty interfejs użytkownika. Następnie, pokażemy jak dodawać skrypty do naszego okna.

Zastosowanie skryptów

Aby utworzone okno dialogowe Znajdź pliki było funkcjonalne, potrzebujemy dodać pewne skrypty, które będą wykonane w trakcie interakcji użytkownika z oknem dialogowym. Chcielibyśmy dodać skrypt funkcji, która będzie obsługiwała przycisk Znajdź, przycisk Anuluj oraz wszystkich funkcji obsługi zdarzeń - każdego polecenia w menu. Należy wspomnieć, że korzystanie z funkcji języka JavaScript, jest podobne do tego z jakim się możemy spotkać w HTML.

Możemy wykorzystać element script, aby dołączyć skrypty do plików XUL. Możemy zagnieżdżać kod skryptu bezpośrednio w pliku XUL poprzez umieszczenie go pomiędzy otartym i zamkniętym znacznikiem script, ale znacznie lepiej korzystać z plików zewnętrznych, które będą wczytywane znacznie szybciej. Atrybut src jest stosowany do odniesienia się do zewnętrznego pliku ze skryptem.

Nasz przykład: Okno Znajdź pliki

Dodajmy, skrypt do okna dialogowego Znajdź pliki. Chociaż, że nie ma znaczenia jaką nazwę mu nadamy, plik przechowujący skrypt to zazwyczaj jest o tej samej nazwie, co pliku XUL, z tą tylko różnicą, że z rozszerzeniem .js. W tym przypadku użyjemy findfile.js. Dodamy linię poniżej zaraz za otwierającym znacznikiem window i PRZED jakimkolwiek innym elementem.

<script src="findfile.js"/>

Plik ze skryptem stworzymy później, kiedy będziemy już wiedzieli, co chcemy umieścić wewnątrz naszego skryptu. Zdefiniujemy kilka funkcji w pliku i będziemy mogli później wywołać za pomocą funkcji obsługi zdarzeń.

Możemy dołączać wiele skryptów w pliku XUL, poprzez wielokrotne zastosowanie znacznika script, przy czym każdy wskazywałby na inny skrypt. Adresy URL możemy stosować względne lub bezwzględne. Na przykład możemy stosować adresy URL w następujących formach:

<script src="findfile.js"/>
<script src="chrome://findfiles/content/help.js"/>
<script src="http://www.example.com/js/items.js"/>

Ten kurs nie jest jednak próbą nauki posługiwania się językiem JavaScript, ze względu na ogromny rozmiar tego tematu, jak i łatwą dostępność odpowiednich do tego materiałów.

Domyślnie konsola JavaScript pokazuje tylko błędy znajdujące się w treści strony, aby wyświetlić błędy chrome JavaScriptu. Do wprowadzenia tych ustawień jest konieczna zmiana ustawień javascript.options.showInConsole na wartość true. Możemy również zmienić ustawienie javascript.options.strict dla debugowania. Poprzez ustawienie wartości na true, non-standard, poorly written lub syntax prone to cause logic errors are logged to the JavaScript console.

Odpowiadanie na zdarzenia

Skrypt będzie zawierał kod odpowiadający na różne zdarzenia wywoływane przez użytkownika lub inne sytuacje. Istnieje około trzydziestu różnych zdarzeń, które mogą być obsługiwane kilkoma różnymi sposobami. Typowym zdarzeniem jest to, że użytkownik naciska klawisz myszy lub klawiatury. Każdy element języka XUL posiada zdolność do wywoływania pewnych zdarzeń w różnych sytuacjach. Pewne zdarzenia są wywoływane tylko poprzez niektóre elementy.

Każde zdarzenie posiada nazwę, dla przykładu; 'mousemove' jest nazwą zdarzenia, które jest wywoływane, kiedy użytkownik przeniesie kursor myszy nad element UI. XUL stosuje ten sam mechanizm zdarzeń, który jest zdefiniowany przez zdarzenia DOM. Kiedy pojawia się akcja powodująca zdarzenie, taka jak; użytkownik poruszający myszką, tworzony jest obiekt zdarzenia odnoszący się do typu tego zdarzenia. Wiele rozmaitych własności jest ustawionych na obiekt zdarzenia, takich jak pozycja myszki, klawisz, który został naciśnięty i inne.

Zdarzenie jest wysyłane do XUL-a fazowo:

  • Pierwsza faza to faza przejęcia, w której zdarzenie jest po raz pierwszy wysyłane do okna, następnie do dokumentu, kierując się za każdym przodkiem elementu XUL, gdzie wystąpiło wcześniej zdarzenie, dopóki osiągnie ten element.
  • Zdarzenie jest wysyłane do tego elementu XUL.
  • W ostatecznej fazie zdarzenie zostaje wysłane do każdego elementu z powrotem w górę, dopóki nie osiągnie po raz kolejny okna.

Możemy zareagować na zdarzenia podczas obu wspomnianych wyżej faz. Kiedy zdarzenie zakończy swoją propagacje, następuje dowolna domyślna akcja, która jest wbudowana w zachowanie elementu.

Na przykład, kiedy poruszymy myszą ponad przyciskiem znajdującym się w pudełku, generowane jest zdarzenie 'mousemove' i jest ono pierwszym, które zostaje wysłane do okna, następnie do dokumentu, i w końcu do pudełka. To zakańcza fazę przejęcia. Następnie, zdarzenie 'mousemove' zostaje wysłane do przycisku. Ostateczna faza powoduje, że zdarzenie zostaje wysłane do pudełka, dokumentu oraz okna. Ostatnia faza jest odwrotnością fazy przejęcia. Warto też zaznaczyć, że niektóre zdarzenia nie wykorzystują ostatniej fazy.

Możemy również dołączyć nasłuch do każdego z elementów, aby każdy z nich był w stanie nasłuchiwać zdarzenia, w trakcie każdego etapu propagacji zdarzenia. Z względu na sposób, w jaki pojedyncze zdarzenie jest przekazywane do wszystkich przodków, można dodać nasłuch do określonego elementu lub do elementu, który znajduje się wyżej w hierarchii. Naturalnie, zdarzenie dodane do elementu wyższego otrzyma powiadomienie o wszystkich elementach wewnątrz jego, natomiast zdarzenie dodane do przycisku będzie w stanie tylko odbierać zdarzenia odnoszące się do tego przycisku. Jest to użyteczne, w przypadku istnienia kilku różnych elementów, które chcielibyśmy obsłużyć poprzez zastosowanie tego samego lub podobnego kodu. ok Kiedy już obsłużysz zdarzenie, bez względu na to gdzie następuje propagacja zdarzenia, prawdopodobnie zechcesz powstrzymać wydarzenie od wysłania go do kolejnych elementów, zatrzymując fazę przejęcia lub wrzenia. W zależności od tego jak dodasz nasłuch zdarzenia do elementu, istnieje kilka możliwości realizacji tego zagadnienia.

Najczęściej używanym zdarzeniem jest zdarzenie 'command'. Zdarzenie command jest 'odpalane' w momencie aktywacji elementu przez użytkownika, na przykład poprzez naciśnięcie przycisku, zmianę pola wyboru lub zaznaczenie jednej pozycji z menu. Zdarzenie command jest użytecznym zdarzeniem ze względu na jego zdolność do automatycznej obsługi różnych sposobów aktywacji elementów. Na przykład: zdarzenie command wystąpi bez względu na to, czy użytkownik użyje przycisku myszy, bądź też naciśnie klawisz Enter.

Istnieją dwa sposoby na dodanie nasłuchu do elementu. Pierwszy, następuje poprzez użycie atrybutu, którego wartość reprezentuje skrypt. Drugi, następuje natomiast dzięki odwołaniu się do metody addEventListener dotyczącej poszczególnego elementu. Pierwsza metoda, mimo prostoty swojej implementacji jest w stanie obsługiwać jedynie zdarzenia fazy wrzenia. Druga natomiast, jest w stanie obsługiwać zdarzenia będące w dowolnej fazie i może być także używana do dodawania wielu nasłuchów zdarzenia obsługującego dany element. Wykorzystywanie atrybutów jest najczęściej stosowaną metodą dla większości zdarzeń.

Nasłuch atrybutu zdarzenia

W celu wykorzystania atrybutów, należy umieścić atrybut w elemencie, do którego chcielibyśmy dodać nasłuch jego zdarzenia. Jego nazwa powinna być nazwą samego zdarzenia poprzedzoną przedrostkiem 'on'. Przykładowo, atrybut przesyłający zdarzenie 'command' to 'oncommand'. Wartość atrybutu powinna być skryptem, który zostanie wykonany w przypadku zajścia zdarzenia. W większości przypadków kod ten jest wyjątkowo prosty i odnosi się do funkcji zdefiniowanej w oddzielnym skrypcie. Poniżej przykład odpowiedzi na wciśnięcie przycisku:

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

<button label="OK" oncommand="alert('Przycisk został naciśnięty!');"/>

Ponieważ zdarzenie 'command' będzie w fazie wrzenia, jest także możliwe, aby umieścić nasłuch zdarzenia w otaczającym je elemencie. W poniższym przykładzie, nasłuch został umieszczony w pudełku i będzie otrzymywał zdarzenia dla obu tych elementów.

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

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

W tym przykładzie, zdarzenie 'command' będzie w fazie wrzenia, począwszy od przycisku lub checkbox, aż do vbox, który je obsłuży. W przypadku drugiego nasłuchu (atrybut oncommand), który został umieszczony w przycisku, jego kod będzie wywołany w pierwszej kolejności, a dopiero po nim wywołana będzie obsługa vbox. Obsługa zdarzeń jest przekazywana, dzięki obiektom zdarzeń, jako dołączony argument nazwany 'event'. Jest to używane w celu otrzymania specyficznych informacji na temat wydarzenia. Jedną z najczęściej używanych własności jest własność 'target', która zawiera element, odnośnie którego zaszło dane wydarzenie. W poniższym przykładzie wyświetlamy alert zawierający nazwy znaczników celu (target). Cel jest zazwyczaj użyteczny, w przypadku użycia zdarzeń w fazie wrzenia, tak aby otrzymać zestaw przycisków, które wszystkie będą obsługiwane przez pojedynczy skrypt.

Można zauważyć, że składnia atrybutów jest podobna do tej użytej przy obsłudze zdarzeń w dokumentach HTML. W zasadzie, obydwa HTML i XUL dzielą ten sam mechanizm zdarzeń. Jedną z ważniejszych różnic jest użycie zdarzenia 'click' (lub atrybutu onclick), które to często używane w HTML-u w celu obsługi funkcji zdarzeń przycisków, w XUL-u jest zastąpione zdarzeniem 'command'. XUL również posiada zdarzenie "click", jednak odnosi się ono jedynie do obsługi przycisków myszy, nie klawiatury. Powinno się unikać zdarzenia "click" korzystając z XUL-a, chyba że istnieje przypadek, w którym dany element może być obsłużony tylko za pomocą myszy.

Nasz przykład: Okno Znajdź pliki

Obsługa poleceń, może zostać dodana tak do przycisku Znajdź i Anuluj występujących w naszym oknie dialogowym. Wciśnięcie przycisku Znajdź, powinno uruchomić proces wyszukiwania. Ponieważ nie mamy zamiaru implementować jeszcze tej części, zostawimy to na razie. Jednakże, wciśnięcie przycisku Anuluj, powinno zamknąć okno. Poniższy kod obrazuje sposób wykonania tego zadania. Dodajmy także podobne zdarzenie do pozycji Zamknij znajdującej się w menu.

<menuitem label="Zamknij" accesskey="z" oncommand="window.close();"/>
...
  
<button id="cancel-button" label="Anuluj"
     oncommand="window.close();"/>

Obsługa zdarzeń została dodana do obu elementów. Atrybut oncommand został dodany do pozycji Zamknij znajdującej się w menu. Poprzez użycie tej specyficznej obsługi zdarzeń, użytkownik będzie w stanie zamknąć okno poprzez kliknięcie na pozycji Zamknij myszką lub przez jej wybór za pomocą klawiatury. Obsługa zdarzenia oncommand została także dodana do przycisku Anuluj.

Nasłuchiwanie zdarzeń DOM

Drugim sposobem dodania obsługi zdarzeń jest wywoływanie metody addEventListener związanej z danym elementem. Pozwala nam to na dołączenie nasłuchu zdarzenia dynamicznie i słuchanie zdarzeń podczas fazy przejęcia. Składnia jest następująca:

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

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

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

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

Funkcja getElementById() zwraca element o danym id, w tym przypadku będzie to identyfikator przycisku. Funkcja addEventListener() jest wywoływana w celu dodania nowego nasłuchu zdarzenia znajdującego się w fazie przejęcia. Pierwszym argumentem jest nazwa zdarzenia, do której jest przypisany nasłuch. Drugi argument to funkcja nasłuchu zdarzenia, która będzie wywoływana, kiedy zajdzie zdarzenie. Wreszcie ostatni argument powinien mieć wartość true dla wszystkich nasłuchiwanych zdarzeń odnoszących się do fazy przejęcia. Można także obsługiwać zdarzenia w trakcie fazy wrzenia, poprzez ustawianie wartości ostatniego argumentu na false. Funkcja nasłuchu zdarzenia przekazywana jako drugi argument, sama powinna pobierać jeden argument, obiekt zdarzenia, tak jak jest pokazane to w powyższej deklaracji funkcji buttonPressed.

Przykład: Znajdź pliki : Źródła Podgląd

Następnie, dowiemy się trochę więcej szczegółów na temat zdarzeń obiektów.

Autorzy i etykiety dokumentu

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