jQuery Metody zdarzeń

jQuery jest dostosowane do reagowania na zdarzenia na stronie HTML.

Czym są wydarzenia?

Wszystkie różne działania odwiedzających, na które strona internetowa może odpowiedzieć, są nazywane zdarzeniami.

Zdarzenie reprezentuje dokładny moment, w którym coś się dzieje.

Przykłady:

przesuwanie myszy nad elementem
wybór przycisku opcji
kliknięcie elementu

Termin „pożary/wypalony” jest często używany w przypadku wydarzeń. Przykład: „Zdarzenie naciśnięcia klawisza jest uruchamiane w momencie naciśnięcia klawisza”.

Oto kilka typowych zdarzeń DOM:

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

Składnia jQuery dla metod zdarzeń

W jQuery większość zdarzeń DOM ma równoważną metodę jQuery.

Aby przypisać zdarzenie kliknięcia do wszystkich akapitów na stronie, możesz to zrobić:

$("p").click();

Następnym krokiem jest zdefiniowanie, co powinno się stać, gdy zdarzenie zostanie uruchomione. Musisz przekazać funkcję do zdarzenia:

$("p").click(function(){
// action goes here!!
});

Powszechnie używane metody zdarzeń jQuery

$(dokument).gotowy()

Metoda $(document).ready()pozwala nam na wykonanie funkcji, gdy dokument jest w pełni załadowany. To zdarzenie zostało już wyjaśnione w rozdziale Składnia jQuery .

Kliknij()

Metoda click()dołącza funkcję obsługi zdarzeń do elementu HTML.

Funkcja jest wykonywana, gdy użytkownik kliknie element HTML.

Poniższy przykład mówi: Kiedy zdarzenie kliknięcia jest uruchamiane na <p>elemencie; ukryj bieżący <p>element:

Przykład

$("p").click(function(){
$(this).hide();
});

dblklik()

Metoda dblclick()dołącza funkcję obsługi zdarzeń do elementu HTML.

Funkcja jest wykonywana, gdy użytkownik dwukrotnie kliknie element HTML:

Przykład

$("p").dblclick(function(){
$(this).hide();
});

myszenter()

Metoda mouseenter()dołącza funkcję obsługi zdarzeń do elementu HTML.

Funkcja jest wykonywana, gdy wskaźnik myszy wejdzie w element HTML:

Przykład

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

myszopuszcza()

Metoda mouseleave()dołącza funkcję obsługi zdarzeń do elementu HTML.

Funkcja jest wykonywana, gdy wskaźnik myszy opuści element HTML:

Przykład

$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

w dół ()

Metoda mousedown()dołącza funkcję obsługi zdarzeń do elementu HTML.

Funkcja jest wykonywana, gdy lewy, środkowy lub prawy przycisk myszy jest wciśnięty, gdy mysz znajduje się nad elementem HTML:

Przykład

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

wstrzymywanie myszy()

Metoda mouseup()dołącza funkcję obsługi zdarzeń do elementu HTML.

Funkcja jest wykonywana po zwolnieniu lewego, środkowego lub prawego przycisku myszy, gdy mysz znajduje się nad elementem HTML:

Przykład

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

unosić się()

Metoda hover()pełni dwie funkcje i jest kombinacją metod mouseenter()i mouseleave() .

Pierwsza funkcja jest wykonywana, gdy mysz wchodzi do elementu HTML, a druga funkcja jest wykonywana, gdy mysz opuszcza element HTML:

Przykład

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

Centrum()

Metoda focus()dołącza funkcję obsługi zdarzeń do pola formularza HTML.

Funkcja jest wykonywana, gdy pole formularza staje się aktywne:

Przykład

$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

plama()

Metoda blur()dołącza funkcję obsługi zdarzeń do pola formularza HTML.

Funkcja jest wykonywana, gdy pole formularza przestanie być aktywne:

Przykład

$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

Metoda on()

Metoda on()dołącza co najmniej jeden program obsługi zdarzeń dla wybranych elementów.

Dołącz zdarzenie kliknięcia do <p>elementu:

Przykład

$("p").on("click", function(){
$(this).hide();
});

Dołącz wiele programów obsługi zdarzeń do <p>elementu:

Przykład

$("p").on({
mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

Ćwiczenia z jQuery