Wprowadzenie do jQuery Events
JQuery jest jedną z najpopularniejszych i najczęściej używanych bibliotek javascript, która została opracowana i zaprojektowana w celu uproszczenia architektury DOM opartej na HTML, tj. Właściwości modelu obiektu dokumentu, takiego jak czytanie, manipulacja i przechodzenie przez drzewo. Inne właściwości z jQueries, takie jak obsługa zdarzeń, Ajax, stylizacja i animacja CSS są również uproszczone. Jest to biblioteka typu open source i darmowa, która jest zwykle używana w 73% ok. 10 milionów stron internetowych, które są obecnie używane. Podstawowe funkcje Jquery obejmują właściwości oparte na elementach DOM, takie jak selektory, manipulowanie i przechodzenie przez drzewo, co sprawia, że praca nad JQuery jest o wiele bardziej interesująca, łatwiejsza i wygodniejsza.
Służy do zapewnienia bardzo prostego i przejrzystego interfejsu, którego można użyć do zastosowania różnego rodzaju niesamowitych efektów. Metody te pozwalają także na szybkie użycie i zastosowanie najczęściej używanych funkcji i ich efektów wraz z konfiguracjami od minimum do minimum. Podstawowe polecenia, takie jak te do pokazywania i ukrywania elementów, są prawie takie same, a pozostałe również należą do tej samej kategorii, czego oczekiwałby każdy, kto chciałby je zobaczyć. W tym przypadku polecenie show () służy do wyświetlania elementów w całkowicie owiniętym, a do ukrywania tych funkcji służy połączone polecenie set i hide ().
Jquery jest szyte na miarę i służy do reagowania na zdarzenia podane na stronie HTML. Wydarzenia same w sobie są działaniami różnych odwiedzających, na które strona internetowa może zareagować. Innymi słowy, zdarzenie służy do nieznacznego przedstawienia dokładnego lub dokładnego momentu, w szczególności czegoś, co się wydarzyło. Może to obejmować scenariusze, takie jak przesunięcie myszy nad elementem, kliknięcie i wybranie przycisku opcji, a także kliknięcie elementu. Termin „ogień” lub „ogień” jest często używany wraz z wydarzeniem. Na przykład zdarzenie naciśnięcia klawisza jest wyzwalane lub popularniej określane jako zwolnione, dzieje się tak głównie w momencie naciśnięcia klawisza. Oto lista najczęstszych i najczęściej używanych zdarzeń DOM.
Zdarzenia myszy, takie jak dblclick, mouseleave, mouseenter, click. Istnieją również inne zdarzenia związane z klawiaturą, takie jak naciśnięcie klawisza, naciśnięcie klawisza i klawiszowanie. Istnieją inne formy wydarzeń, takie jak zmiana, przesłanie, rozmycie i skoncentrowanie zdarzeń. Istnieją inne zdarzenia, które są zdarzeniami dokumentu lub okna, takie jak zmiana rozmiaru, ładowanie, przewijanie, rozładowywanie itp. W Jquery większość zdarzeń opartych na DOM ma odpowiednią metodę jquery. Dlatego, aby przypisać nowe zdarzenie do wszystkich istniejących akapitów na stronie, można zastosować poniższą składnię.
Zdarzenia i składnia jQuery
Oto następujące zdarzenia jQuery ze składnią podaną poniżej
1. Kliknij ()
To zdarzenie występuje po każdym kliknięciu elementu. Ta metoda click () służy do wyzwalania klikniętego elementu znanego również jako zdarzenie click, które służy do dołączenia do funkcji za każdym razem, gdy wystąpi zdarzenie związane z kliknięciem.
Składnia
$(selector).click()
Jeśli chcesz dołączyć funkcję do tego zdarzenia kliknięcia,
$(selector).click(function)
Następnym krokiem jest zawsze akcja i wyzwalacz, które kształtują faktyczne działanie i funkcjonowanie funkcji, a zatem za każdym razem, gdy zdarzenie zostanie uruchomione, funkcja powinna zostać przekazana do zdarzenia.
Przykład
$("p").click(function()(
// action which is triggered goes here!! ));
2. Dblclick ()
Ta metoda służy do dołączenia funkcji obsługi zdarzeń do podanego elementu HTML. Ta funkcja jest wykonywana za każdym razem, gdy użytkownik dwukrotnie kliknie dany element HTML.
Składnia
$(selector).dblclick()
Przykład
$("p").dblclick(function()(
$(this).hide();
));
3. zmiana ()
To zdarzenie występuje za każdym razem, gdy zmienia się wartość określonego elementu, tzn. Działa tylko dla danych wejściowych, pola tekstowego i wybranych elementów. Metoda change () służy do wyzwalania zdarzenia zmiany lub tego, które zostaje dołączone do funkcji za każdym razem, gdy musi wystąpić zdarzenie związane ze zmianą.
Składnia
$(selector).change()
Przykład
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. rozmycie ()
To zdarzenie związane z rozmyciem występuje tylko wtedy, gdy element traci skupienie. Metoda blur (), która jest używana do wyzwalania zdarzenia rozmycia lub ta, która jest używana do dołączenia funkcji, która ma być uruchomiona, gdy wystąpi zdarzenie rozmycia. Ta metoda jest często używana z metodą focus ().
Składnia
$(selector).blur()
Przykład
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. dane
Ta właściwość event.data jest używana do przechowywania opcjonalnych przekazywanych danych związanych z metodą zdarzenia, gdy powiązany jest moduł obsługi dla prądu.
Składnia
event.data
Przykład
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. przestrzeń nazw
Ta właściwość służy do zwracania niestandardowej przestrzeni nazw przy każdym uruchomieniu zdarzenia. Właściwość jest ustawiana przez autorów wtyczek, których można używać do obsługi zadań w bardzo różny sposób, w zależności od używanej przestrzeni nazw. Przestrzenie nazw zaczynające się znakiem podkreślenia są zarezerwowanymi obszarami nazw dla JQuery.
Składnia
event.namespace
Przykład
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. PageX
Jest to właściwość typu strony, która służy do zwracania pozycji wskaźnika myszy, która jest powiązana z lewą krawędzią dokumentu. Ten rodzaj nieruchomości jest często używany w przypadku zdarzenia. Właściwość PageY.
Składnia
event.PageX
Przykład
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. PageY
Jest to właściwość typu strony, która służy do zwracania pozycji wskaźnika myszy, która jest powiązana z górną krawędzią boczną dokumentu. Ten rodzaj nieruchomości jest często używany w przypadku zdarzenia. Właściwość PageX.
Składnia
event.PageY
Przykład
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. wynik
Właściwość event.result służy do przechowywania poprzedniej lub ostatniej wartości zwracanej przez procedurę obsługi zdarzenia, która jest konkretnie wyzwalana przez określone zdarzenie.
Składnia
event.result
Przykład
$("button").click(function()(
return "Hi there!";
));
10. preventDefault ()
Ta związana ze zdarzeniem metoda event.preventDefault () służy do zatrzymania domyślnej akcji określonego elementu. Przykłady tego scenariusza obejmują:
Zapobieganie przesłaniu formularza przez przycisk Prześlij
Uniemożliwiaj linkowi dostęp do określonego adresu URL.
Konkretne zdarzenie, takie jak event.preventDefault (), służy do sprawdzania, czy do wywołania zdarzenia używana jest metoda lub funkcja preventDefault ().
Składnia
event.preventDefault()
Przykład
$("a").click(function(event)(
event.preventDefault();
));
11. Event.target ()
Ta właściwość służy do zwracania, który element DOM ma być wyzwalany przez to zdarzenie. Porównywanie zdarzenia jest najczęściej przydatne, aby ustalić, czy dane zdarzenie jest obsługiwane z powodu zdarzenia zwanego propagacją.
Składnia
event.target
Przykład
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. timeStamp
Ta właściwość służy do zwracania liczby milisekund od czasu 1 stycznia 1970 r., Co odpowiada pierwszemu uruchomieniu zdarzenia po raz pierwszy.
Składnia
event.TimeStamp
Przykład
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. typ
Służy do monitorowania zdarzenia i jego wyzwalanego typu.
Składnia
event.type
Przykład:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. która ()
Ta właściwość służy do zwracania klawisza lub przycisku myszy, który został naciśnięty dla zdarzenia.
Składnia
event.which
Przykład
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. focus ()
Ta właściwość i fokus dla tego zdarzenia występuje, gdy element jest używany do uzyskania fokusa, który pojawia się, gdy zostanie wybrany przez kliknięcie myszą lub nawigację po karcie. Metoda focus () służy do wyzwalania zdarzenia focus lub dołączania funkcji, która ma być uruchamiana w przypadku wystąpienia zdarzenia związanego z focus.
Składnia
$(selector).focus()
Przykład
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. hover ()
Ta metoda najechania kursorem służy do określenia dwóch funkcji, które mają być uruchomione, gdy wskaźnik myszy najeżdża na wszystkie wybrane elementy. Ta metoda wyzwala zarówno zdarzenia pozostawienia myszy, jak i zdarzenia myszy. Jeśli określono tylko jedną funkcję, będzie ona działać zarówno dla zdarzeń opuszczania myszy, jak i zdarzeń w centrum myszy.
Składnia
$(selector).hover(inFunction, outFunction)
Przykład
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. keydown ()
Kolejność zdarzeń związanych ze zdarzeniem keydown jest następująca:
- Keydown: Używany, gdy klucz jest w drodze.
- Naciśnięcie klawisza : Występuje po naciśnięciu klawisza klawiatury
- Keyup: Jak sama nazwa wskazuje, jest używane, gdy naciśnięty jest klawisz strony w górę.
Składnia
$(selector).keydown()
Przykład
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. naciśnięcie klawisza ()
Kolejność zdarzeń związanych ze zdarzeniem naciśnięcia klawisza jest następująca:
- Keydown: Używany, gdy klucz jest w drodze.
- Naciśnięcie klawisza : Występuje po naciśnięciu klawisza klawiatury
- Keyup: Jak sama nazwa wskazuje, jest używane, gdy naciśnięty jest klawisz strony w górę.
Składnia
$(selector).keypress()
Przykład
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. keyup ()
Kolejność zdarzeń związanych ze zdarzeniem keyup jest następująca:
- Keydown: Używany, gdy klucz jest w drodze.
- Naciśnięcie klawisza : Występuje po naciśnięciu klawisza klawiatury
- Keyup: Jak sama nazwa wskazuje, jest używane, gdy naciśnięty jest klawisz strony w górę.
Składnia
$(selector).keyup()
Przykład
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. Live ()
Ta metoda lub funkcja life () jquery służy do dołączania jednego lub więcej programów obsługi zdarzeń, które mają być używane w szczególności dla wybranych list elementów, a także określa funkcję, która ma być uruchomiona w miejscu zdarzenia. Wszystkie procedury obsługi zdarzeń są dołączane przy użyciu metody live (), która będzie działać zarówno dla elementów bieżących, jak i FUTURE, które są oparte na dopasowywaniu elementów selektora, które mogą być jak nowy element utworzony przez skrypt. Metodę die () można wykorzystać do zniszczenia metody live ().
Składnia
$(selector).live(event, data, function)
Przykład
$("button").live("click", function()(
$("p").slideToggle();
));
21. Load ()
Metoda load służy do dołączenia modułu obsługi zdarzeń do zdarzenia opartego na obciążeniu. Zdarzenie ładowania występuje za każdym razem, gdy określone To zdarzenie występuje i działa za każdym razem, gdy elementy powiązane z adresem URL, takie jak obraz, ramka, skrypt, element iframe i obiekt okna. Zdarzenie ładowania może, ale nie musi, być wyzwalane i zależy od przeglądarki, nawet jeśli obraz jest buforowany. Istnieje również metoda AJAX, która jest metodą jquery znaną jako load (), która jest wywoływana w zależności od parametrów.
Składnia
$(selector).load(function)
Przykład
$("img").load(function()(
alert("stuff loaded.");
));
22. Mousedown
To zdarzenie występuje tylko wtedy, gdy lewy przycisk kursora myszy zostanie wciśnięty w dół nad wybraną listą elementu. Metoda lub funkcja mousedown () służy do wyzwalania tego zdarzenia, które dołącza funkcję i jest uruchamiane za każdym razem, gdy nastąpi zdarzenie mousedown. Ta metoda jest często używana razem z metodą mouseup ().
Składnia
$(selector).mousedown()
Przykład
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. Wyłącz ()
Ta metoda służy do usuwania modułu obsługi zdarzeń, który jest dołączony wraz z metodą on (). Można powiedzieć, że jest to zastąpienie metody unbind (), die () i undelegate (). Ta metoda służy do zapewnienia spójności interfejsu API i zawsze zaleca się korzystanie z tej metody, ponieważ służy ona do uproszczenia podstawy kodu Jquery.
Składnia
$(selector).off(event, selector, function(eventObj), map)
Przykład
$("button").click(function()(
$("p").off("click");
));
24. mouseenter ()
To zdarzenie występuje za każdym razem, gdy wskaźnik myszy znajduje się nad określonym elementem i wchodzi, gdy wyzwala zdarzenie mouseenter lub służy do dołączenia funkcji, którą można wykorzystać do uruchomienia za każdym razem, gdy wystąpi zdarzenie oparte na myszy.
Składnia
$(selector).mouseenter()
Przykład
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. mouseleave ()
To zdarzenie występuje za każdym razem, gdy wskaźnik myszy znajduje się nad określonym elementem i opuszcza się, gdy wyzwala zdarzenie opuszczania myszy lub służy do odłączenia funkcji, którą można użyć do uruchomienia za każdym razem, gdy wystąpi zdarzenie oparte na myszy.
Składnia
$(selector).mouseleave()
Przykład
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
Jquery jest jedną z najczęściej używanych bibliotek, jeśli chodzi o rozwój interfejsu użytkownika. Zapewnia to unikalne funkcje i szeroki zakres funkcji, które pomagają uczynić życie programistów i ludzi ogólnie łatwymi i wygodnymi. Mam nadzieję, że podoba Ci się nasz artykuł. Bądź na bieżąco z naszym blogiem, aby uzyskać więcej takich.
Polecane artykuły
Jest to przewodnik po zdarzeniach jQuery. Tutaj omawiamy listę najczęstszych i najczęściej używanych różnych zdarzeń jQuery ze składnią i przykładami. Możesz także zapoznać się z następującymi artykułami, aby dowiedzieć się więcej -
- Efekty jQuery
- Metody jQuery
- Atrybuty jQuery
- Jak zainstalować Jquery?
- 8 najlepszych selektorów jQuery z implementacją kodu
- Przewodnik po przykładach paska postępu JQuery
- Przewodnik po różnych zdarzeniach JavaScript