Introduksjon til jQuery Events
JQuery er et av de mest populære og mest brukte javascript-bibliotekene som er utviklet og designet for å forenkle den HTML-baserte DOM-arkitekturen. De andre egenskapene fra jQueries som hendelseshåndtering, Ajax, styling og CSS-animasjon er også forenklet. Det er en åpen kildekode og et gratis bibliotek som vanligvis brukes i 73% av de ca. 10 millioner nettsteder som brukes i dag. Kjernefunksjonene til Jquery inkluderer DOM-elementbaserte egenskaper som velgere, manipulering og treovergang, noe som gjør arbeidet med JQuery mye mer interessant, enklere og praktisk.
Det brukes til å gi et veldig enkelt og slett grensesnitt som kan brukes til å bruke forskjellige slags fantastiske effekter. Disse metodene tillater også rask bruk og anvendelse av de mest brukte funksjonene og deres effekter sammen med bare til minimale konfigurasjoner. De grunnleggende kommandoene, for eksempel for å vise og skjule elementer, er ganske mye de samme, og resten andre ligger også i samme kategori med hva noen som er villige til å se dem forventer. show () -kommandoen, i dette tilfellet, brukes til å vise elementene i en fullstendig innpakket, og en kombinert sett og skjule () -kommando brukes til å skjule disse funksjonene.
Jquery er skreddersydd som brukes til å svare på hendelsene som er gitt på en HTML-side. Hendelsene i seg selv er de forskjellige besøkende handlinger som kan besvares av websiden. Med andre ord brukes en hendelse til å representere det presise eller det nøyaktige øyeblikket, spesielt noe som har skjedd. Dette kan inkludere scenarier som å flytte musen over elementet, klikke og velge alternativknappen og også klikke på elementet. Begrepet branner eller begrepet avfyrt er mange ganger brukt sammen med arrangementet. For eksempel blir tastetrykkhendelsen utløst eller mer populært betegnet som avfyrt, det er hovedsakelig når øyeblikket du trykker på tasten. Her er listen over de vanligste og ofte brukte DOM-hendelsene.
Mushendelser som dblklikk, muselav, musesenter, klikk. Det er noen andre tastaturhendelser, for eksempel tastetrykk, tastatur og tastetrykk. Det er andre former for hendelser som forandring, innsending, uskarphet og fokusering av hendelser. Det er andre hendelser som er dokument- eller vinduhendelser som størrelse, lasting, rulle, lossing osv. I Jquery. De fleste av de DOM-baserte hendelsene har den tilsvarende jquery-metoden. Derfor for å tilordne en ny hendelse til alle de eksisterende avsnittene på siden, kan syntaksen nedenfor tas i bruk.
Hendelser og syntaks for jQuery
Her er følgende hendelser av jQuery med syntaks gitt nedenfor
1. Klikk på ()
Denne hendelsen skjer når elementet er klikket. Denne klikk-metoden brukes til å utløse det klikkede elementet, også kjent som klikkhendelsen, som brukes til å knytte til en funksjon når en klikkrelatert hendelse oppstår.
syntax
$(selector).click()
Når du ønsker å knytte en funksjon til denne klikkhendelsen,
$(selector).click(function)
Det neste trinnet kommer alltid sammen med handlingen og utløseren som danner den faktiske funksjonen og funksjonen til funksjonen, og derfor skal en funksjon sendes til hendelsen når hendelsen blir avfyrt.
Eksempel
$("p").click(function()(
// action which is triggered goes here!! ));
2. Dblclick ()
Denne metoden brukes til å knytte en hendelsesbehandlerfunksjon til HTML-elementet som følger med. Denne funksjonen utføres når brukeren dobbeltklikker på det gitte HTML-elementet.
syntax
$(selector).dblclick()
Eksempel
$("p").dblclick(function()(
$(this).hide();
));
3. endring ()
Denne hendelsen oppstår når verdien til et bestemt element endres, dvs. at den bare fungerer for inndata, tekstområde og valgte elementer. Metoden for endring () brukes til å utløse endringshendelse eller den som blir knyttet til funksjonen hver gang en endringsrelatert hendelse må inntreffe.
syntax
$(selector).change()
Eksempel
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. uskarphet ()
Denne hendelsesrelaterte til uskarphet skjer først når elementet mister fokus. Uklarhetsmetoden () som brukes for å utløse uskarphet, eller den som brukes for å knytte en funksjon som skal kjøres når en uskarphet skjer. Denne metoden brukes ofte med fokus () -metoden.
syntax
$(selector).blur()
Eksempel
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. data
Denne hendelsen.data-egenskapen brukes til å inneholde valgfrie overførte data relatert til en hendelsesmetode når den utførende behandleren av strømmen er bundet.
syntax
event.data
Eksempel
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. navneområde
Denne egenskapen brukes til å returnere tilpasset navneområde når hendelsen utløses. Egenskapen brukes til å bli satt av plugin-forfattere som kan brukes til å håndtere oppgaver veldig annerledes, avhengig av navnefeltet som brukes. Navnearealene som begynner med understrekingen er reserverte navnefelt for JQuery.
syntax
event.namespace
Eksempel
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. SideX
Dette er sidetypeegenskapen som brukes til å returnere posisjonen til musepekeren som er relatert til venstre sidekant av dokumentet. Denne typen eiendommer blir ofte brukt sammen med arrangementet. SideY eiendom.
syntax
event.PageX
Eksempel
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. SideY
Dette er sidetypeegenskapen som brukes til å returnere posisjonen til musepekeren som er relatert til dokumentets øverste sidekant. Denne typen eiendommer blir ofte brukt sammen med arrangementet. PageX eiendom.
syntax
event.PageY
Eksempel
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. resultat
Egenskapen hendelsesresultat brukes til å inneholde den forrige eller den siste verdien som returneres av hendelseshåndtereren som er spesielt utløst av den spesifikke hendelsen.
syntax
event.result
Eksempel
$("button").click(function()(
return "Hi there!";
));
10. preventDefault ()
Denne hendelsesrelaterte hendelsen.preventDefault () -metoden brukes til å stoppe standardhandlingen til et bestemt element i å skje. Eksemplene på dette scenariet inkluderer:
Å forhindre at innsendingsknapp sendes inn skjema
Hindre at en kobling får tilgang til en bestemt URL.
En spesiell hendelse, for eksempel event.preventDefault (), brukes til å sjekke om preventDefault () -metoden eller -funksjonen brukes til å ringe hendelsen.
syntax
event.preventDefault()
Eksempel
$("a").click(function(event)(
event.preventDefault();
));
11. Event.target ()
Denne egenskapen brukes til å returnere hvilket DOM-element som skal utløses av denne hendelsen. Det er oftest enn ikke nyttig å sammenligne hendelsen. Mål mot dette som skal gjøres for å avgjøre om den spesielle hendelsen blir håndtert på grunn av en hendelse som kalles boblende.
syntax
event.target
Eksempel
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. tidstempel
Denne egenskapen brukes til å returnere antall millisekunder siden tiden 1. januar 1970, noe som tilsvarer første gang da hendelsen først ble utløst.
syntax
event.TimeStamp
Eksempel
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. type
Dette brukes til å overvåke hendelsen og dens type som utløses.
syntax
event.type
Eksempel:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. hvilken ()
Denne egenskapen brukes til å returnere tastaturet eller museknappen som ble trykket på for hendelsen.
syntax
event.which
Eksempel
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. fokus ()
Denne egenskapen og fokuset for denne hendelsen oppstår når et element brukes til å få fokuset som oppstår når det velges med museklikk eller ved å navigere i en fane på den. Fokusmetoden brukes til å utløse fokushendelsen eller knytte en funksjon som skal kjøres når en fokusrelatert hendelse oppstår.
syntax
$(selector).focus()
Eksempel
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. svevet ()
Denne svevemetoden brukes til å spesifisere to funksjoner som brukes til å kjøre når musepekeren svir over alle elementene som er valgt. Denne metoden utløser både museleave- og musesenterhendelser. Hvis det bare er en funksjon som er spesifisert, vil den kjøres for både museleave- og musesenterhendelser.
syntax
$(selector).hover(inFunction, outFunction)
Eksempel
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. keydown ()
Rekkefølgen på hendelsene som er relatert til keydown-hendelse er:
- Keydown: Dette brukes når nøkkelen er på vei ned.
- Tastetrykk: Dette skjer når tasten på tastaturet trykkes
- Tastatur: Som navnet antyder, brukes dette når du trykker på tasten på den oppadgående siden.
syntax
$(selector).keydown()
Eksempel
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. tastetrykk ()
Rekkefølgen på hendelsene som er relatert til tastetrykkhendelsen er:
- Keydown: Dette brukes når nøkkelen er på vei ned.
- Tastetrykk: Dette skjer når tasten på tastaturet trykkes
- Tastatur: Som navnet antyder, brukes dette når du trykker på tasten på den oppadgående siden.
syntax
$(selector).keypress()
Eksempel
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. keyup ()
Rekkefølgen på hendelsene som er relatert til keyup-hendelse er:
- Keydown: Dette brukes når nøkkelen er på vei ned.
- Tastetrykk: Dette skjer når tasten på tastaturet trykkes
- Tastatur: Som navnet antyder, brukes dette når du trykker på tasten på den oppadgående siden.
syntax
$(selector).keyup()
Eksempel
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. Live ()
Denne levende () metoden eller funksjonen til jquery brukes til å knytte en eller flere hendelsesbaserte håndterere som skal brukes spesielt for de valgte elementelistene, og den spesifiserer også funksjonen som skal kjøres der hendelsene oppstår. Alle hendelsesbehandlerne er knyttet ved hjelp av live () -metoden som vil fungere for både nåværende og FREMTID elementer som er basert på å matche velgerelementene som kan være som et nytt element laget av skriptet. Die () -metoden kan brukes til å ødelegge live () -metoden.
syntax
$(selector).live(event, data, function)
Eksempel
$("button").live("click", function()(
$("p").slideToggle();
));
21. Last ()
Lastmetoden brukes til å knytte en hendelseshåndterer til den lastbaserte hendelsen. Lasthendelsen oppstår når en spesifisert Denne hendelsen oppstår og fungerer når elementene som er tilknyttet URL, for eksempel bilde, ramme, skript, iframe og vinduobjektet. Lasthendelsen kan utløses eller ikke, og det avhenger av nettleseren selv om bildet er bufret. Det er også en AJAX-metode som er en jquery-metode kjent som last (), den som kalles avhenger av parametrene.
syntax
$(selector).load(function)
Eksempel
$("img").load(function()(
alert("stuff loaded.");
));
22. Mousedown
Denne hendelsen skjer bare når venstre musepekerknapp trykkes ned over den valgte listen over elementet. Metoden eller funksjonen mousedown () brukes til å utløse denne hendelsen som knytter en funksjon, og den kjøres når en mousedown-hendelse skjer. Denne metoden brukes ofte sammen med mouseup () -metoden.
syntax
$(selector).mousedown()
Eksempel
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. Av ()
Denne metoden brukes til å fjerne en hendelsesbehandler som er knyttet sammen med på () -metoden. Det kan sies å være erstatning for metoden for å frigjøre (), die () og undelegate (). Denne metoden brukes for å få mye konsistens i APIen, og det anbefales alltid å benytte seg av denne metoden da denne brukes for å forenkle Jquery-kodebasen.
syntax
$(selector).off(event, selector, function(eventObj), map)
Eksempel
$("button").click(function()(
$("p").off("click");
));
24. musesenter ()
Denne hendelsen oppstår når musepekeren er over elementet som er spesifisert og kommer inn når det utløser musesenterhendelsen, eller den brukes til å knytte en funksjon som kan brukes til å kjøre når en musesenterbasert hendelse oppstår.
syntax
$(selector).mouseenter()
Eksempel
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. mouseleave ()
Denne hendelsen oppstår når musepekeren er over elementet som er spesifisert og går når det utløser hendelsen om mus forlater, eller den brukes til å feste en funksjon som kan brukes til å kjøres når en musbasert hendelse oppstår.
syntax
$(selector).mouseleave()
Eksempel
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
Jquery er et av de mest brukte bibliotekene når det kommer til frontend utvikling. Dette gir unike funksjoner og et bredt spekter av funksjoner som hjelper deg med å gjøre livene til utviklere og mennesker overalt enkle og praktiske. Håper du likte artikkelen vår. Følg med på bloggen vår for mer som disse.
Anbefalte artikler
Dette er en guide til jQuery Events. Her diskuterer vi listen over de vanligste og ofte brukte forskjellige hendelsene i jQuery med Syntax og eksempler. Du kan også se på følgende artikler for å lære mer -
- jQuery Effects
- jQuery Methods
- jQuery Attributter
- Hvordan installerer Jquery?
- Topp 8 jQuery-velgere med implementering av kode
- Eksempel på JQuery Progress Bar
- Veiledning for forskjellige JavaScript-hendelser