Introduktion til jQuery-begivenheder
JQuery er et af de mest populære og udbredte javascript-biblioteker, der er udviklet og designet til at forenkle den HTML-baserede DOM-arkitektur, dvs. dokumentobjektmodelleegenskaber såsom læsning, manipulation og trækrydsning. De andre egenskaber fra jQueries såsom begivenhedshåndtering, Ajax, styling og CSS-animation er også forenklet. Det er et open source og et gratis bibliotek, der typisk bruges i 73% af de ca. 10 millioner websteder, der bruges i dag. Kerneegenskaberne ved Jquery inkluderer DOM-elementbaserede egenskaber som vælgere, manipulation og trækrydsning, hvilket gør arbejdet med JQuery meget mere interessant, lettere og praktisk.
Det bruges til at tilvejebringe en meget enkel og let udseende interface, der kan bruges til anvendelse af forskellige slags fantastiske effekter. Disse metoder tillader også hurtig brug og anvendelse af de mest almindeligt anvendte funktioner og deres effekter sammen med bare til minimale konfigurationer. De grundlæggende kommandoer såsom dem til at vise og skjule elementer er stort set de samme, og hvile andre ligger også i samme kategori med hvad nogen villig til at se dem ville forvente. kommando show () bruges i dette tilfælde til at vise elementerne i en helt indpakket, og et kombineret sæt og skjule () kommando bruges til at skjule disse funktioner.
Jquery er skræddersyet, som bruges til at svare på begivenhederne, der leveres på en HTML-side. Begivenhederne i sig selv er de forskellige besøgers handlinger, som websiden kan svare på. Med andre ord bruges en begivenhed til let at repræsentere det præcise eller det nøjagtige øjeblik, især noget, der er sket. Dette kan omfatte scenarier som at flytte vores mus over elementet, klikke og vælge alternativknappen og også klikke på elementet. Udtrykket brande eller udtrykket fyres er mange gange brugt sammen med begivenheden. F.eks. Udløses tastetrykhændelsen eller kaldes mere populært som fyret, det er hovedsageligt, når det øjeblik, du trykker på tasten. Her er listen over de mest almindelige og hyppigt anvendte DOM-begivenheder.
Musbegivenheder såsom dblclick, mouseleave, mouseenter, klik. Der er nogle andre tastaturbegivenheder, f.eks. Tastetryk, keyup og keydown. Der er andre former for begivenheder såsom ændring, indsendelse, sløring og fokusering af begivenheder. Der er andre begivenheder, der er dokument- eller vinduehændelser, såsom størrelse, indlæsning, rulle, losning osv. I Jquery, de fleste af DOM-baserede begivenheder har den tilsvarende jquery-metode. Derfor til at tildele en ny begivenhed til alle de eksisterende afsnit på siden, kan nedenstående syntaks bruges til at blive brugt.
Begivenheder og syntaks for jQuery
Her er følgende begivenheder af jQuery med syntaks nedenfor
1. Klik på ()
Denne begivenhed finder sted, hver gang der klikkes på elementet. Denne klik () -metode bruges til at udløse det klikkede element, også kendt som klikhændelsen, der bruges til at knytte til en funktion, hver gang en klikrelateret begivenhed opstår.
Syntaks
$(selector).click()
Når du ønsker at knytte en funktion til denne klikbegivenhed,
$(selector).click(function)
Det næste trin kommer altid sammen med handlingen og udløseren, der danner den faktiske funktion og funktion af funktionen, og derfor, når begivenheden bliver fyret, skal en funktion overføres til begivenheden.
Eksempel
$("p").click(function()(
// action which is triggered goes here!! ));
2. Dblclick ()
Denne metode bruges til at knytte en begivenhedshåndtererfunktion til det medfølgende HTML-element. Denne funktion udføres, når brugeren dobbeltklikker på det givne HTML-element.
Syntaks
$(selector).dblclick()
Eksempel
$("p").dblclick(function()(
$(this).hide();
));
3. ændring ()
Denne begivenhed opstår, når værdien af et bestemt element ændres, dvs. det fungerer kun for input, textarea og valgte elementer. Metoden ændring () bruges til at udløse ændringshændelse eller den, der bliver knyttet til funktionen, hver gang en ændringsrelateret begivenhed skal forekomme.
Syntaks
$(selector).change()
Eksempel
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. sløre ()
Denne begivenhedsrelaterede sløring sker kun, når elementet mister fokus. Metoden til sløring (), der bruges til at udløse slørbegivenheden, eller den, der bruges til at knytte en funktion, der skal køres, hver gang en slørbegivenhed opstår. Denne metode bruges ofte med fokus () -metoden.
Syntaks
$(selector).blur()
Eksempel
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. data
Denne egenskab.data-egenskab bruges til at indeholde de valgfri videregivne data relateret til en hændelsesmetode, når den eksekverende handler for den aktuelle er bundet.
Syntaks
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 egenskab bruges til at returnere brugerdefineret navneområde, når begivenheden udløses. Egenskaben bruges til at blive indstillet af plugin-forfattere, som kan bruges til at håndtere opgaver meget forskelligt, hvilket afhænger af det navneområde, der bruges. Navneområderne, der begynder med understregningen, er reserverede navneområder til JQuery.
Syntaks
event.namespace
Eksempel
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. SideX
Dette er egenskaben for sidetype, der bruges til at returnere placeringen af musemarkøren, der er relateret til dokumentets venstre kant. Denne type ejendom bruges ofte sammen med begivenheden. PageY ejendom.
Syntaks
event.PageX
Eksempel
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. SideY
Dette er egenskaben for sidetype, der bruges til at returnere placeringen af musemarkøren, der er relateret til dokumentets øverste sidekant. Denne type ejendom bruges ofte sammen med begivenheden. PageX egenskab.
Syntaks
event.PageY
Eksempel
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. resultat
Hændelsen hændelsesresultat bruges til at indeholde den forrige eller den sidste værdi, der returneres af begivenhedshåndtereren, der specifikt udløses af den specifikke begivenhed.
Syntaks
event.result
Eksempel
$("button").click(function()(
return "Hi there!";
));
10. preventDefault ()
Denne hændelsesrelaterede event.preventDefault () -metode bruges til at stoppe standardhandlingen for et bestemt element i at ske. Eksemplerne på dette scenarie inkluderer:
Forhindring af indsendelse af en indsendelse af en formular
Undgå, at et link får adgang til en bestemt URL.
En bestemt begivenhed, såsom event.preventDefault (), bruges til at kontrollere, om preventDefault () -metoden eller -funktionen bruges til at kalde begivenheden.
Syntaks
event.preventDefault()
Eksempel
$("a").click(function(event)(
event.preventDefault();
));
11. Event.target ()
Denne egenskab bruges til at returnere hvilket DOM-element, der skal udløses af denne begivenhed. Det er ofte end ikke nyttigt at sammenligne begivenheden. Mål mod dette, der skal gøres for at afgøre, om den bestemte begivenhed håndteres på grund af en begivenhed kaldet boblende.
Syntaks
event.target
Eksempel
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. timeStamp
Denne egenskab bruges til at returnere antallet af millisekunder siden tiden 1. januar 1970, hvilket svarer til første gang, da begivenheden først blev udløst.
Syntaks
event.TimeStamp
Eksempel
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. type
Dette bruges til at overvåge begivenheden og dens type, der udløses.
Syntaks
event.type
Eksempel:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. hvilket ()
Denne egenskab bruges til at returnere tastaturtasten eller museknappen, der blev trykket på for begivenheden.
Syntaks
event.which
Eksempel
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. fokus ()
Denne egenskab og fokus for denne begivenhed opstår, når et element bruges til at få det fokus, der opstår, når det vælges ved museklik eller ved at navigere på en fane på den. Fokus-metoden bruges til at udløse fokusbegivenhed eller vedhæfte en funktion, der skal køres, når en fokusrelateret begivenhed opstår.
Syntaks
$(selector).focus()
Eksempel
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. hover ()
Denne hover-metode bruges til at specificere to funktioner, der bruges til at køre, når musemarkøren svæver over alle de valgte elementer. Denne metode udløser både musemåls- og musenter-begivenheder. Hvis der kun er en funktion, der er specificeret, kører den til både musemåls- og musenter-begivenheder.
Syntaks
$(selector).hover(inFunction, outFunction)
Eksempel
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. keydown ()
Rækkefølgen af begivenheder, der er relateret til keydown begivenhed, er:
- Keydown: Dette bruges, når nøglen er på vej ned.
- Tastetryk: Dette sker, når der trykkes på tasten på tastaturet
- Tastatur: Som navnet antyder, bruges dette, når man trykker på tasten på den opadgående side.
Syntaks
$(selector).keydown()
Eksempel
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. tastetryk ()
Rækkefølgen af begivenheder, der er relateret til tastetrykhændelse, er:
- Keydown: Dette bruges, når nøglen er på vej ned.
- Tastetryk: Dette sker, når der trykkes på tasten på tastaturet
- Tastatur: Som navnet antyder, bruges dette, når man trykker på tasten på den opadgående side.
Syntaks
$(selector).keypress()
Eksempel
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. keyup ()
Rækkefølgen af begivenheder, der er relateret til keyup-begivenhed, er:
- Keydown: Dette bruges, når nøglen er på vej ned.
- Tastetryk: Dette sker, når der trykkes på tasten på tastaturet
- Tastatur: Som navnet antyder, bruges dette, når man trykker på tasten på den opadgående side.
Syntaks
$(selector).keyup()
Eksempel
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. Live ()
Denne levende () -metode eller -funktion af jquery bruges til at knytte en eller flere begivenhedsbaserede håndterere, der skal bruges især til de valgte lister over elementer, og den specificerer også den funktion, der skal køres, hvor begivenhederne opstår. Alle begivenhedshåndterere er knyttet ved hjælp af metoden live (), der fungerer både for aktuelle og FUTURE-elementer, der er baseret på at matche vælgerelementerne, der kan være som et nyt element oprettet af scriptet. Die () -metoden kan bruges til at ødelægge metoden Live ().
Syntaks
$(selector).live(event, data, function)
Eksempel
$("button").live("click", function()(
$("p").slideToggle();
));
21. Belastning ()
Belastningsmetoden bruges til at knytte en begivenhedshåndterer til den belastningsbaserede begivenhed. Indlæsningsbegivenheden opstår, når en specificeret Denne begivenhed forekommer og fungerer, hver gang de elementer, der er knyttet til URL'en, såsom billede, ramme, script, iframe og vindueobjektet. Indlæsningshændelsen kan muligvis ikke udløse, og det afhænger af browseren, selvom billedet er cache. Der er også en AJAX-metode, som er en jquery-metode, der kaldes belastning (), den, der kaldes, afhænger af parametrene.
Syntaks
$(selector).load(function)
Eksempel
$("img").load(function()(
alert("stuff loaded.");
));
22. Mousedown
Denne begivenhed finder kun sted, når den venstre musemarkørknap trykkes ned over den valgte liste over elementet. Metoden eller funktionen mousedown () bruges til at udløse denne begivenhed, der knytter en funktion, og den kører, når der sker en mousedown-begivenhed. Denne metode bruges ofte sammen med mouseup () -metoden.
Syntaks
$(selector).mousedown()
Eksempel
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. Fra ()
Denne metode bruges til at fjerne en begivenhedshåndterer, der er knyttet sammen med metoden (). Det kan siges at være erstatning for metoden for åben () metode, die () og undelegated (). Denne metode bruges til at bringe en masse konsistens i API'en, og det anbefales altid at gøre brug af denne metode, da denne bruges til at forenkle Jquery-kodebasen.
Syntaks
$(selector).off(event, selector, function(eventObj), map)
Eksempel
$("button").click(function()(
$("p").off("click");
));
24. musenter ()
Denne begivenhed forekommer, når musepekeren er over det specificerede element og indtastes, når den udløser museenterhændelsen, eller den bruges til at vedhæfte en funktion, der kan bruges til at køre, når en musenterbaseret begivenhed opstår.
Syntaks
$(selector).mouseenter()
Eksempel
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. mouseleave ()
Denne begivenhed forekommer, når musepekeren er over det specificerede element og forlader, når den udløser hændelsen til museblade, eller den bruges til at feste en funktion, der kan bruges til at køre, når der sker en musbaseret begivenhed.
Syntaks
$(selector).mouseleave()
Eksempel
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
Jquery er et af de mest anvendte biblioteker, når det kommer til frontend-udvikling. Dette giver unikke funktioner og en bred vifte af funktioner, der hjælper med at gøre udviklernes og menneskers liv let og praktisk. Håber du kunne lide vores artikel. Hold øje med vores blog for mere som disse.
Anbefalede artikler
Dette er en guide til jQuery-begivenheder. Her diskuterer vi listen over de mest almindelige og ofte anvendte forskellige begivenheder af jQuery med syntaks og eksempler. Du kan også se på de følgende artikler for at lære mere -
- jQuery Effects
- jQuery-metoder
- jQuery Attributter
- Sådan installeres Jquery?
- Top 8 jQuery-vælgere med implementering af kode
- Vejledning til eksempler på JQuery Progress Bar
- Vejledning til forskellige JavaScript-begivenheder