Händelsehantering med jQuery

De evenemang är situationer som uppstår i vårt dokument HTML, kan utlösas av situationer i själva systemet eller av användaråtgärder. I båda fallen, när en händelse inträffar är det möjligt att göra en efterbehandling med jQuery, så att vi kan uppnå bättre effekter i våra program.
Detta är av yttersta vikt, eftersom vi känner till denna aspekt och med hjälp av ramverket kan ge våra webbsidor och applikationer mer dynamik.
Detta är det första vi bör svara på när vi arbetar med evenemang i jQuery, Vi hade redan sagt att händelser är handlingar eller situationer som utlöses av systemet eller av användaren, till exempel när dokumentet har lästs in utlöser systemet händelsen redo eller klar, när en användare klickar på ett element utlöses en homonym händelse.
Med dessa små exempel i åtanke kan vi sedan se grundsyntaxen för att hantera alla typer av händelser, vilket är följande:

$ (väljare) .on ("eventName", funktion () {….})

Låt oss komma ihåg eller förtydliga att väljaren är namnet med vilket vi ska lokalisera elementet i vårt dokument, sedan med hjälp av metoden .on () Vi kan sedan berätta vilken händelse den ska lyssna på och när den upptäcker den kan den utföra en anonym funktion inom vårt skriptavsnitt i HTML.
Något intressant som vi kan lyfta fram är att vi kan använda en handläggare för olika evenemangMed andra ord kan vi utföra samma åtgärd för flera situationer, vi behöver bara lista de olika händelser som måste lyssna på, syntaxen är mycket lik den vi just sett.
$ (väljare) .on ("eventname1 eventname2 eventname3….", function () {….})
Eftersom vi vet det mest grundläggande måste vi också börja veta det jQuery Det kommer alltid att göra våra liv enklare som utvecklare, så det har gett några genvägar för att skapa händelsehanterare, med detta behöver vi inte göra den fullständiga deklarationen som vi såg i föregående del, men vi tillämpar dessa genvägar direkt på väljaren.
Låt oss se några av de mest intressanta genvägarna som används av utvecklare, det bör noteras att det inte är den fullständiga listan över tillgängliga, för att få den här listan är det bättre att gå direkt till den officiella dokumentationen, men för att börja lite på ämne, dessa är mer än tillräckligt.
redo ()Körs när alla delar av dokumentet SOL de laddas, det vill säga när sajten är klar, därav dess namn. Det bör noteras att detta är en systemhändelse.
Skicka in ()Det händer när vi gör en formulärinlämningDet intressanta är att när formen uppstår skickar den inte på det traditionella sättet, utan snarare väntar på vad den här händelsen säger till den, så att vi kan använda den som en mellanliggande punkt för fältvalideringar för att nämna ett exempel på dess användning.
klick ()Det körs när användaren gör det klick med muspekaren över ett element kan det vara från ett inmatningstypfält, för att inkludera element som t.ex. eller ankarna . Hur vi kan berätta är en händelse som utlöses av användaren.
oskärpa ()Det inträffar när elementet som vi för närvarande är ur fokus, till exempel skriver vi i ett textfält och vi går till ett nästa fält, i det här fallet har det första fältet tappat fokus och denna händelse körs.
fokus ()I motsats till den föregående händelsen inträffar detta precis när vi fokuserar på ett element.
sväva ()Denna händelse händer när vi håller muspekaren över något element i SOL, kan vanligtvis tillämpas på och ankare .
Välj ()Uppstår när vi väljer ett element inom ett fält VäljTill exempel har vi en rullgardinsmeny och vi väljer ett objekt från dess innehåll.
förändra ()Uppstår när värdet eller tillståndet för ett element ändras, till exempel inom ett fält Välj, när vi ändrar det alternativ som vi ser återspeglas där.
Eftersom vi vet lite om de mest använda händelserna kommer vi att generera ett litet dokument som omsätter några av dem i praktiken, antingen i sin fulla syntax eller med exempel, så att vi kan experimentera med båda formerna.
I följande kod kommer vi att se hur vi initialt kommer att skriva med console.log () när vi har dokumentet i redo (), då kommer vi att tillämpa ett annat meddelande när vi håller musen över a för att bekräfta hur det fungerar sväva, äntligen får vi se hur man använder klick () Y fokus () för att visa andra meddelanden. Låt oss titta på koden som beskriver ovanstående:

 Händelseexempel 1
Mus över denna Div !!

Skriv något här:
Fokusera på mig:
$ (document) .ready (function () {console.log ("Den klara händelsen har hänt !!");}); $ ("# svevhändelse"). hover (funktion () {console.log ("Hover -händelse hände!");}); $ ("# Click event"). Klicka (function () {console.log ("vi har utlöst en Click -händelse FÖRSTORA
Detta händer när vi vill att ett element ska ha olika associerade händelser, på så sätt kan vi bättre organisera vår kod och tillhandahålla flera funktioner till vårt element.
Det finns två möjligheter, att utföra samma åtgärd för flera händelser eller att utföra en annan åtgärd för var och en, på vilket sätt vi vill måste vi använda hela syntaxen, den första som vi redan har definierat i början.
Låt oss se hur man kopplar olika åtgärder till olika händelser för samma element. För detta måste vi använda en grundsyntax som följande:

 $ (väljare) .on ({EventName1: function () {…}, EventName2: function () {…}}); 

Som vi kan se undviker vi att behöva göra något som följande när vi använder denna syntaxform:

 $ (väljare) .ShortcutEvent1 (funktion () {}); $ (väljare) .ShortcutEvent2 (funktion () {}); 

Vad gör att vi kan bli mer organiserade, men båda är giltiga och det är upp till utvecklaren att tillämpa den som passar honom bäst.
Eftersom vi vet hur vi kopplar flera händelser till ett element, kommer vi att omsätta det i praktiken, vi kommer att välja händelserna klick () Y fokus () För detta exempel kommer vi att tillämpa dem på två element, i det första elementet kommer vi att generera samma svar för var och en av dem, och i det andra kommer varje händelse att ha sitt eget svar. Låt oss se koden som vi måste utföra för att uppnå vårt mål:

 Händelseexempel 2
Samma resultat flera händelser:

Olika resultat per händelse:
$ ("# element1"). on ("klickfokus", funktion () {console.log ("vi visar samma för tre händelser!");}); $ ("# element2"). på ({click: function () {console.log ("vi har klickat på element2");}, focus: function () {console.log ("vi har fokuserat på element2");}}); 

Här ser vi att vi måste vara försiktiga med den andra formen av olika svar för olika händelser, eftersom händelserna inte går in i citattecken som när vi gör det i den första formen, också att vi måste infoga inom parentes {} allt inuti metoden .on (), detta är ett fel som kan uppstå mycket ofta så med denna försiktighetsåtgärd kan vi undvika det. Låt oss nu se hur vårt exempel ser ut när vi kör det i vår webbläsare:

FÖRSTORA
Vi noterar disken med en nummer 2 när händelserna på det första elementet inträffar betyder det att vi har gjort samma handling två gånger som vi hade planerat. I det andra elementet märker vi att vi skriver ut de två bestämda åtgärderna i konsolen, även om vi också ser att de förekommer i en annan ordning än den vi placerade dem, detta beror på att händelsen av fokus händer före klick i händelsehierarkin, särskilt om vi använder nyckeln FLIK att flytta mellan fälten.
I slutet av denna handledning har vi lärt oss hur vi kan komma igång i en värld av händelsehantering med jQueryDetta är bara en munöppnare, men med dessa små funktioner kan vi uppnå många saker i våra applikationer.

Hjälpte denna handledning dig?
Om inte

HJÄLP FÖRBÄTTRA DENNA HANDBOK!
Tror du att du kan korrigera eller förbättra den här självstudien? Du kan skicka din utgåva med de ändringar som du anser vara användbara.
0 användare har redigerat den här självstudien. Redigera och bli en erkänd expert!
Redigera denna handledning

Liknande handledning

Hur man drar och tar bilder med JQuery UIHur man gör en Spinner- eller laddningsikon med JQueryJQuery -plugins och bibliotek för webbutvecklingFlexigrid dynamiskt rutnät med JQuery och PHPJSON -hantering med Node.jsHändelsehantering i Node.jsHantering av buffertar i Node.jsRegelbundna uttryck med Jquery
Inga kommentarer, var den första!
Vänta inte längre och gå in på SolveticLämna dina kommentarer och dra nytta av användarkontot Gå med oss!

Skapa kontoRegistrera dig GRATIS för att få ditt Solvetic -kontoRegistrera ett konto
IdentifieraHar du redan ett konto? Logga in härIdentifiera mig på mitt konto




Information

 Publicerad 12 dec 2014 14:44
 Uppdaterad 14 dec 2014 05:44
 Besök 3,7K
 NivåProfessionell


Senaste JavaScript -självstudier

Hur man uppdaterar NPM med PowerShell i Windows 10
Hur man drar och tar bilder med JQuery UI
Hur man gör en Spinner- eller laddningsikon med JQuery
Hur man får en webbplats översatt till flera språk

Se mer av JavaScript