Prototyp - obsługa zdarzeń

Zarządzanie zdarzeniami to jedno z największych wyzwań przy wykonywaniu skryptów w różnych przeglądarkach. Każda przeglądarka ma inne podejście do obsługi naciśnięć klawiszy.

Prototype Framework rozwiązuje wszystkie problemy ze zgodnością z różnymi przeglądarkami i pozwala uniknąć wszelkich problemów związanych z zarządzaniem zdarzeniami.

Prototype Framework udostępnia przestrzeń nazw Event , która jest pełna metod, które wszystkie przyjmują bieżący obiekt zdarzenia jako argument i szczęśliwie wytwarzają żądane informacje we wszystkich głównych przeglądarkach.

Przestrzeń nazw zdarzeń zawiera również znormalizowaną listę kodów kluczy, których można używać ze zdarzeniami związanymi z klawiaturą. W przestrzeni nazw zdefiniowano następujące stałe -

S.No. Kluczowa stała i opis
1.

KEY_BACKSPACE

Reprezentuj klawisz spacji.

2.

KEY_TAB

Reprezentuj klawisz tabulacji.

3.

KEY_RETURN

Reprezentują klucz powrotu.

4.

KEY_ESC

Reprezentuj klawisz esc.

5.

KEY_LEFT

Reprezentują lewy klawisz.

6.

KEY_UP

Reprezentuj klucz.

7.

KEY_RIGHT

Reprezentują właściwy klucz.

8.

KEY_DOWN

Reprezentuj klawisz dolny.

9.

KEY_DELETE

Reprezentują klawisz usuwania.

10.

KEY_HOME

Reprezentuj klucz domowy.

11.

KEY_END

Reprezentują klawisz zakończenia.

12.

KEY_PAGEUP

Reprezentuj klawisz w górę.

13.

KEY_PAGEDOWN

Reprezentuj klawisz strony w dół.

Jak obsługiwać zdarzenia

Zanim zaczniemy, zobaczmy przykład użycia metody zdarzenia. Ten przykład pokazuje, jak przechwycić element DOM, na którym wystąpiło zdarzenie.

Przykład

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         // Register event 'click' and associated call back.
         Event.observe(document, 'click', respondToClick);
  
         // Callback function to handle the event.
         function respondToClick(event) {
            var element = event.element();
            alert("Tag Name : " + element.tagName );
         }
      </script>
   </head>

   <body>
      <p id = "note"> Click on any part to see the result.</p>
      <p id = "para">This is paragraph</p>
      <div id = "division">This is divsion.</div>
   </body>
</html>

Wynik

Oto pełna lista wszystkich metod związanych z Event. Funkcje, z których najprawdopodobniej będziesz często korzystać, to obserwacja , element i zatrzymywanie .

Prototypowe metody zdarzeń

NOTE - Upewnij się, że masz co najmniej wersję 1.6 pliku prototype.js.

S.No. Metoda i opis
1. element()

Zwraca element DOM, w którym wystąpiło zdarzenie.

2. poszerzać()

Rozszerza zdarzenie o wszystkie metody zawarte w Event.Methods.

3. findElement ()

Zwraca pierwszy element DOM o podanej nazwie tagu w górę od tego, na którym nastąpiło zdarzenie.

4. isLeftClick ()

Określa, czy zdarzenie myszy związane z przyciskiem dotyczyło „lewego” (właściwie głównego) przycisku.

5. przestrzegać()

Rejestruje procedurę obsługi zdarzeń w elemencie DOM.

6. pointerX ()

Zwraca bezwzględne położenie poziome zdarzenia myszy.

7. pointerY ()

Zwraca bezwzględne położenie w pionie dla zdarzenia myszy.

8. zatrzymać()

Zatrzymuje propagację zdarzenia i zapobiega w końcu wywołaniu jego domyślnej akcji.

9. stopObserving ()

Wyrejestrowuje procedurę obsługi zdarzeń.

10. unloadCache ()

Wyrejestrowuje wszystkie programy obsługi zdarzeń zarejestrowane za pomocą programu follow. Automatycznie połączone dla Ciebie. Niedostępne od 1.6.