Obsługa zdarzeń

Obsługa zdarzeń w jQuery to jedna z podstawowych funkcjonalności biblioteki jQuery, która pozwala na przypisywanie funkcji do różnych zdarzeń wywoływanych przez interakcję użytkownika z elementami strony, takich jak kliknięcie, najechanie kursorem, wciśnięcie klawisza na klawiaturze czy zmiana wartości formularza. W jQuery obsługa zdarzeń polega na przypisaniu funkcji do zdarzenia wywoływanego przez element na stronie. Można to zrobić na kilka sposobów:

Metoda on() - metoda ta służy do przypisania funkcji do zdarzenia. Przyjmuje dwa parametry: nazwę zdarzenia oraz funkcję do wykonania w momencie wywołania zdarzenia.

								
$( "button" ).on( "click", function() {
  alert( "Kliknięto przycisk!" );
});
								
						

Metoda click() - metoda ta jest skrótem dla metody on("click").

								
$( "button" ).click(function() {
  alert( "Kliknięto przycisk!" );
});
								
						

Metoda bind() - metoda ta służy do przypisania funkcji do zdarzenia, ale jest mniej popularna od metody on(). Przyjmuje dwa parametry: nazwę zdarzenia oraz funkcję do wykonania w momencie wywołania zdarzenia. Przykład:

								
$( "button" ).bind( "click", function() {
  alert( "Kliknięto przycisk!" );
});
								
						

Metoda delegate() - metoda ta służy do przypisania funkcji do zdarzenia dla elementów potomnych danego elementu. Przyjmuje trzy parametry: selektor elementu, na którym zostanie wywołane zdarzenie, nazwę zdarzenia oraz funkcję do wykonania w momencie wywołania zdarzenia. Przykład:

								
$( "div" ).delegate( "button", "click", function() {
  alert( "Kliknięto przycisk w elemencie DIV!" );
});
								
						

Metoda hover() - metoda ta służy do przypisania funkcji do zdarzenia mouseenter (czyli najechanie kursorem na element) oraz mouseleave (czyli zjechanie kursorem z elementu). Przyjmuje dwa parametry: funkcję do wykonania w momencie najechania oraz funkcję do wykonania w momencie zjechania z elementu. Przykład:

								
$( "button" ).hover(

  function() {
    $( this ).addClass( "hover" );
  },

  function() {
    $( this ).removeClass( "hover" );
  }

);
								
						

Metoda keydown() - metoda ta służy do przypisania funkcji do zdarzenia naciśnięcia klawisza na klawiaturze. Przyjmuje funkcję do wykonania w momencie naciśnięcia klawisza.

								
$( document ).keydown(function( event ) {

  if ( event.which == 13 ) {
    event.preventDefault();
    alert( "Naciśnięto klawisz ENTER!" );
  }

});
								
						

Metoda submit() - metoda ta służy do przypisania funkcji do zdarzenia przesłania formularza. Przyjmuje funkcję do wykonania w momencie przesłania formularza.

								
$( "form" ).submit(function( event ) {
  event.preventDefault();
  alert( "Formularz został przesłany!" );
});
								
						

Metoda resize() - metoda ta służy do przypisania funkcji do zdarzenia zmiany rozmiaru okna przeglądarki. Przyjmuje funkcję do wykonania w momencie zmiany rozmiaru okna przeglądarki.

								
$( window ).resize(function() {
  alert( "Okno przeglądarki zmieniło rozmiar!" );
});
								
						

Metoda scroll() - metoda ta służy do przypisania funkcji do zdarzenia przewijania strony. Przyjmuje funkcję do wykonania w momencie przewijania strony.

								
$( window ).scroll(function() {
  alert( "Przewinięto stronę!" );
});
								
						

Notatka

Dzięki obsłudze zdarzeń w jQuery możemy reagować na akcje użytkowników i wykonywać różne operacje, takie jak zmiana stylu elementów, wyświetlanie okien dialogowych, wysyłanie formularzy czy pobieranie danych z serwera. Biblioteka jQuery oferuje wiele metod umożliwiających łatwe i intuicyjne przypisanie funkcji do zdarzeń, co pozwala na bardziej efektywne i zwięzłe pisanie kodu JavaScript.