jQuery - obsługa zdarzeń

Mamy możliwość tworzenia dynamicznych stron internetowych za pomocą zdarzeń. Zdarzenia to akcje, które mogą zostać wykryte przez aplikację internetową.

Oto przykłady wydarzeń -

  • Kliknięcie myszą
  • Ładowanie strony internetowej
  • Najechanie myszą na element
  • Przesyłanie formularza HTML
  • Naciśnięcie klawisza na klawiaturze itp.

Po wyzwoleniu tych zdarzeń możesz użyć funkcji niestandardowej, aby zrobić prawie wszystko, co chcesz ze zdarzeniem. Te niestandardowe funkcje wywołują obsługę zdarzeń.

Programy obsługi zdarzeń wiązania

Korzystając z modelu zdarzeń jQuery, możemy ustanowić programy obsługi zdarzeń na elementach DOM z rozszerzeniem bind() metoda w następujący sposób -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Ten kod spowoduje, że element podziału zareaguje na zdarzenie click; gdy użytkownik kliknie później w tym dziale, zostanie wyświetlony alert.

To da następujący wynik -

Pełna składnia polecenia bind () jest następująca -

selector.bind( eventType[, eventData], handler)

Poniżej znajduje się opis parametrów -

  • eventType- Ciąg zawierający typ zdarzenia JavaScript, taki jak kliknięcie lub przesłanie. Pełną listę typów zdarzeń znajdziesz w następnej sekcji.

  • eventData - Jest to opcjonalny parametr, czyli mapa danych, które zostaną przekazane do programu obsługi zdarzeń.

  • handler - Funkcja do wykonania za każdym razem, gdy zostanie wyzwolone zdarzenie.

Usuwanie programów obsługi zdarzeń

Zwykle po ustanowieniu procedury obsługi zdarzeń pozostaje ona aktywna przez pozostałą część życia strony. Może zaistnieć potrzeba usunięcia modułu obsługi zdarzeń.

jQuery udostępnia unbind()polecenie, aby usunąć istniejącą procedurę obsługi zdarzeń. Składnia unbind () jest następująca -

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

Poniżej znajduje się opis parametrów -

  • eventType- Ciąg zawierający typ zdarzenia JavaScript, taki jak kliknięcie lub przesłanie. Pełną listę typów zdarzeń znajdziesz w następnej sekcji.

  • handler - Jeśli podano, identyfikuje konkretny odbiornik, który ma zostać usunięty.

Typy wydarzeń

Sr.No. Typ i opis wydarzenia
1

blur

Występuje, gdy element traci fokus.
2

change

Występuje po zmianie elementu.
3

click

Występuje po kliknięciu myszą.
4

dblclick

Występuje po dwukrotnym kliknięciu myszą.
5

error

Występuje, gdy wystąpi błąd podczas ładowania lub rozładowywania itp.
6

focus

Występuje, gdy element staje się aktywny.
7

keydown

Występuje po naciśnięciu klawisza.
8

keypress

Występuje po naciśnięciu i zwolnieniu klawisza.
9

keyup

Występuje po wydaniu klucza.
10

load

Występuje po załadowaniu dokumentu.
11

mousedown

Występuje po naciśnięciu przycisku myszy.
12

mouseenter

Występuje, gdy mysz przechodzi do regionu elementu.
13

mouseleave

Występuje, gdy mysz opuszcza region elementu.
14

mousemove

Występuje, gdy porusza się wskaźnik myszy.
15

mouseout

Występuje, gdy wskaźnik myszy przesunie się poza element.
16

mouseover

Występuje, gdy wskaźnik myszy przesuwa się nad elementem.
17

mouseup

Występuje po zwolnieniu przycisku myszy.
18

resize

Występuje po zmianie rozmiaru okna.
19

scroll

Występuje, gdy okno jest przewijane.
20

select

Występuje po zaznaczeniu tekstu.
21

submit

Występuje po przesłaniu formularza.
22

unload

Występuje, gdy dokumenty są wyładowywane.

Obiekt zdarzenia

Funkcja zwrotna przyjmuje pojedynczy parametr; gdy moduł obsługi zostanie wywołany, obiekt zdarzenia JavaScript będzie przez niego przepuszczany.

Obiekt zdarzenia jest często niepotrzebny, a parametr jest pomijany, ponieważ wystarczający kontekst jest zwykle dostępny, gdy procedura obsługi jest zobowiązana do dokładnego poznania, co należy zrobić po wyzwoleniu procedury obsługi, jednak istnieją pewne atrybuty, do których trzeba uzyskać dostęp.

Atrybuty zdarzenia

Sr.No. Właściwość i opis
1

altKey

Ustaw na true, jeśli klawisz Alt został naciśnięty, gdy zdarzenie zostało wyzwolone, false, jeśli nie. Klawisz Alt jest oznaczony jako Opcja na większości klawiatur Mac.
2

ctrlKey

Ustaw na true, jeśli klawisz Ctrl został naciśnięty, gdy zdarzenie zostało wyzwolone, false, jeśli nie.
3

data

Wartość, jeśli istnieje, przekazana jako drugi parametr do polecenia bind () podczas ustanawiania procedury obsługi.
4

keyCode

W przypadku zdarzeń keyup i keydown zwraca to naciśnięty klawisz.
5

metaKey

Ustaw na true, jeśli klawisz Meta został naciśnięty, gdy zdarzenie zostało wyzwolone, false, jeśli nie. Klawisz Meta to klawisz Ctrl na komputerach PC i klawisz Command na komputerach Mac.
6

pageX

W przypadku zdarzeń myszy określa poziomą współrzędną zdarzenia względem początku strony.
7

pageY

W przypadku zdarzeń myszy określa pionową współrzędną zdarzenia względem początku strony.
8

relatedTarget

W przypadku niektórych zdarzeń myszy określa element, który kursor pozostawił lub wprowadził, gdy zdarzenie zostało wyzwolone.
9

screenX

W przypadku zdarzeń myszy określa poziomą współrzędną zdarzenia względem początku ekranu.
10

screenY

W przypadku zdarzeń myszy określa pionową współrzędną zdarzenia względem początku ekranu.
11

shiftKey

Ustaw na true, jeśli klawisz Shift został naciśnięty, gdy zdarzenie zostało wyzwolone, false, jeśli nie.
12

target

Identyfikuje element, dla którego zostało wyzwolone zdarzenie.
13

timeStamp

Sygnatura czasowa (w milisekundach) utworzenia zdarzenia.
14

type

W przypadku wszystkich zdarzeń określa typ zdarzenia, które zostało wywołane (np. Kliknięcie).
15

which

W przypadku zdarzeń związanych z klawiaturą określa kod numeryczny klawisza, który spowodował zdarzenie, aw przypadku zdarzeń myszy, określa, który przycisk został naciśnięty (1 dla lewego, 2 dla środkowego, 3 dla prawego).

 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

To da następujący wynik -

Metody zdarzeń

Istnieje lista metod, które można wywołać w obiekcie zdarzenia -

Sr.No. Metoda i opis
1 zapobiecDefault ()

Uniemożliwia przeglądarce wykonanie domyślnej akcji.
2 isDefaultPrevented ()

Zwraca informację, czy zdarzenie event.preventDefault () zostało kiedykolwiek wywołane w tym obiekcie zdarzenia.
3 stopPropagation ()

Zatrzymuje propagację zdarzenia do elementów nadrzędnych, zapobiegając powiadamianiu o zdarzeniu przez programy obsługi nadrzędne.
4 isPropagationStopped ()

Zwraca informację, czy event.stopPropagation () była kiedykolwiek wywołana w tym obiekcie zdarzenia.
5 stopImmediatePropagation ()

Zatrzymuje wykonanie pozostałych programów obsługi.
6 isImmediatePropagationStopped ()

Zwraca czy zdarzenie event.stopImmediatePropagation () było kiedykolwiek wywołane w tym obiekcie zdarzenia.

Metody manipulacji zdarzeniami

Poniższa tabela zawiera listę ważnych metod związanych ze zdarzeniami -

Sr.No. Metoda i opis
1 bind (typ, [dane], fn)

Wiąże procedurę obsługi z co najmniej jednym zdarzeniem (takim jak kliknięcie) dla każdego dopasowanego elementu. Może również wiązać zdarzenia niestandardowe.
2 off (events [, selector] [, handler (eventObject)])

Działa odwrotnie niż na żywo, usuwa powiązane wydarzenie na żywo.
3 najechanie (nad, na zewnątrz)

Symuluje najechanie na obiekt, na przykład przesuwanie myszy na obiekt.
4 on (zdarzenia [, selektor] [, dane], program obsługi)

Wiąże procedurę obsługi ze zdarzeniem (takim jak kliknięcie) dla wszystkich aktualnie - i w przyszłości - dopasowanych elementów. Może również wiązać zdarzenia niestandardowe.
5 one (typ, [dane], fn)

Wiąże procedurę obsługi z co najmniej jednym zdarzeniem, które ma zostać wykonane raz dla każdego dopasowanego elementu.
6 gotowy (fn)

Wiąże funkcję do wykonania, gdy DOM jest gotowy do przejścia i manipulacji.
7 wyzwalacz (zdarzenie, [dane])

Wywołaj zdarzenie dla każdego dopasowanego elementu.
8 triggerHandler (zdarzenie, [dane])

Uruchamia wszystkie powiązane programy obsługi zdarzeń w elemencie.
9 unbind ([typ], [fn])

Działa odwrotnie niż bind, usuwa powiązane zdarzenia z każdego z dopasowanych elementów.

Metody pomocy zdarzeń

jQuery zapewnia również zestaw funkcji pomocniczych zdarzeń, których można użyć do wyzwolenia zdarzenia w celu powiązania dowolnego typu zdarzenia wymienionego powyżej.

Metody wyzwalania

Poniżej znajduje się przykład, który wywołałby rozmycie we wszystkich akapitach -

$("p").blur();

Metody wiązania

Poniżej znajduje się przykład, który wiązałby plik click wydarzenie na wszystkich <div> -

$("div").click( function () { 
   // do something here
});
Sr.No. Metoda i opis
1

blur( )

Uruchamia zdarzenie rozmycia każdego dopasowanego elementu.
2

blur( fn )

Powiąż funkcję ze zdarzeniem rozmycia każdego dopasowanego elementu.
3

change( )

Uruchamia zdarzenie zmiany każdego dopasowanego elementu.
4

change( fn )

Wiąże funkcję ze zdarzeniem zmiany każdego dopasowanego elementu.
5

click( )

Uruchamia zdarzenie kliknięcia każdego dopasowanego elementu.
6

click( fn )

Wiąże funkcję ze zdarzeniem click każdego dopasowanego elementu.
7

dblclick( )

Uruchamia zdarzenie dblclick dla każdego dopasowanego elementu.
8

dblclick( fn )

Wiąże funkcję ze zdarzeniem dblclick każdego dopasowanego elementu.
9

error( )

Uruchamia zdarzenie błędu każdego dopasowanego elementu.
10

error( fn )

Wiąże funkcję ze zdarzeniem błędu każdego dopasowanego elementu.
11

focus( )

Uruchamia zdarzenie skupienia każdego dopasowanego elementu.
12

focus( fn )

Wiąże funkcję ze zdarzeniem fokusu każdego dopasowanego elementu.
13

keydown( )

Uruchamia zdarzenie keydown dla każdego dopasowanego elementu.
14

keydown( fn )

Powiąż funkcję ze zdarzeniem keydown każdego dopasowanego elementu.
15

keypress( )

Uruchamia zdarzenie naciśnięcia klawisza każdego dopasowanego elementu.
16

keypress( fn )

Wiąże funkcję ze zdarzeniem keypress każdego dopasowanego elementu.
17

keyup( )

Uruchamia zdarzenie keyup każdego dopasowanego elementu.
18

keyup( fn )

Powiąż funkcję ze zdarzeniem keyup każdego dopasowanego elementu.
19

load( fn )

Wiąże funkcję ze zdarzeniem load każdego dopasowanego elementu.
20

mousedown( fn )

Wiąże funkcję ze zdarzeniem mousedown każdego dopasowanego elementu.
21

mouseenter( fn )

Powiąż funkcję ze zdarzeniem mouseenter każdego dopasowanego elementu.
22

mouseleave( fn )

Powiąż funkcję ze zdarzeniem mouseleave każdego dopasowanego elementu.
23

mousemove( fn )

Powiąż funkcję ze zdarzeniem mousemove każdego dopasowanego elementu.
24

mouseout( fn )

Powiąż funkcję ze zdarzeniem mouseout każdego dopasowanego elementu.
25

mouseover( fn )

Powiąż funkcję ze zdarzeniem najechania myszą każdego dopasowanego elementu.
26

mouseup( fn )

Powiąż funkcję ze zdarzeniem mouseup każdego dopasowanego elementu.
27

resize( fn )

Powiąż funkcję ze zdarzeniem resize każdego dopasowanego elementu.
28

scroll( fn )

Powiąż funkcję ze zdarzeniem przewijania każdego dopasowanego elementu.
29

select( )

Uruchom zdarzenie select dla każdego dopasowanego elementu.
30

select( fn )

Powiąż funkcję z wybranym zdarzeniem każdego dopasowanego elementu.
31

submit( )

Wywołaj zdarzenie przesyłania każdego dopasowanego elementu.
32

submit( fn )

Powiąż funkcję ze zdarzeniem przesłania każdego dopasowanego elementu.
33

unload( fn )

Wiąże funkcję ze zdarzeniem unload każdego dopasowanego elementu.
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved