Introduktion till jQuery-evenemang
JQuery är ett av de mest populära och allmänt använda javascript-biblioteken som är utvecklat och utformat för att förenkla den HTML-baserade DOM-arkitekturen, dvs dokumentobjektmodellegenskaper som läsning, manipulation och trädkorsning. De andra egenskaperna från jQueries som händelsehantering, Ajax, styling och CSS-animering är också förenklade. Det är en öppen källkod och ett gratis bibliotek som vanligtvis används i 73% av de cirka 10 miljoner webbplatser som används idag. Kärnfunktionerna i Jquery inkluderar DOM-elementbaserade egenskaper som väljare, manipulation och trädkorsning vilket gör att arbeta med JQuery mycket mer intressant, enklare och bekvämt.
Det används för att tillhandahålla ett mycket enkelt och vanligt snyggt gränssnitt som kan användas för att tillämpa olika typer av fantastiska effekter. Dessa metoder tillåter också snabb användning och tillämpning av de vanligaste funktionerna och deras effekter tillsammans med bara till minimala konfigurationer. De grundläggande kommandona som för att visa och dölja element är ganska samma och vila andra ligger också i samma kategori med vad någon som är villig att se dem skulle förvänta sig. kommandot show (), i det här fallet, används för att visa elementen i ett helt inslaget och ett kombinerat set and hide () -kommando används för att dölja dessa funktioner.
Jquery är skräddarsydd som används för att svara på händelserna på en HTML-sida. Händelserna i sig är de olika besökarnas åtgärder som kan besvaras av webbsidan. Med andra ord, en händelse används för att något representera det exakta eller exakta ögonblicket, särskilt något som har hänt. Detta kan inkludera scenarier som att flytta musen över elementet, klicka och välja alternativknappen och även klicka på elementet. Termen bränder eller termen avfyras är många en tid som används tillsammans med händelsen. Till exempel utlöses knapptryckningshändelsen eller kallas mer populärt som avfyra, det är främst när du trycker på knappen. Här är listan över de vanligaste och ofta använda DOM-händelserna.
Mushändelser som dblklick, musläge, muscenter, klick. Det finns några andra tangentbordshändelser, t.ex. Keypress, keyup och keydown. Det finns andra former av händelser som förändring, skicka, oskärpa och fokusera händelser. Det finns andra händelser som är dokument- eller fönsterhändelser som storlek, laddning, rullning, lossning etc. i Jquery, de flesta av DOM-baserade händelser har motsvarande jquery-metod. För att tilldela en ny händelse till alla befintliga stycken på sidan kan syntaxen nedan användas.
Händelser och syntax för jQuery
Här är följande händelser av jQuery med syntax som anges nedan
1. Klicka på ()
Denna händelse inträffar varje gång du klickar på elementet. Den här klickmetoden används för att trigga det klickade elementet, även känt som klickhändelsen, som används för att koppla till en funktion när en klickrelaterad händelse inträffar.
Syntax
$(selector).click()
När du vill bifoga en funktion till den här klickhändelsen,
$(selector).click(function)
Nästa steg kommer alltid tillsammans med handlingen och utlösaren som bildar funktionens faktiska funktion och funktion och därför bör en funktion överföras till händelsen närhelst händelsen avfyras.
Exempel
$("p").click(function()(
// action which is triggered goes here!! ));
2. Dblclick ()
Den här metoden används för att koppla en händelsefunktionsfunktion till det medföljande HTML-elementet. Denna funktion körs när användaren dubbelklickar på det givna HTML-elementet.
Syntax
$(selector).dblclick()
Exempel
$("p").dblclick(function()(
$(this).hide();
));
3. förändring ()
Denna händelse inträffar när värdet på ett visst element ändras, det vill säga att det bara fungerar för input, textarea och utvalda element. Metoden ändring () används för att utlösa ändringshändelse eller den som kopplas till funktionen när en ändringsrelaterad händelse måste inträffa.
Syntax
$(selector).change()
Exempel
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. oskärpa ()
Denna händelsrelaterade till oskärpa inträffar endast när elementet tappar fokus. Metoden oskärpa () som används för att utlösa suddighetshändelsen eller den som används för att ansluta en funktion som ska köras när en oskärpahändelse inträffar. Denna metod används ofta med fokus () -metoden.
Syntax
$(selector).blur()
Exempel
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. data
Egenskapen event.data används för att innehålla de valfria överförda data relaterade till en händelsemetod när den exekverande hanteraren för strömmen är bunden.
Syntax
event.data
Exempel
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. namnutrymme
Den här egenskapen används för att returnera anpassat namnutrymme när händelsen utlöses. Egenskapen används för att ställas in av pluginförfattare som kan användas för att hantera uppgifter mycket annorlunda beroende på namnområdet som används. Namnytorna som börjar med understreck är reserverade namnutrymmen för JQuery.
Syntax
event.namespace
Exempel
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. SidaX
Detta är sidtypegenskapen som används för att returnera positionen för muspekaren som är relaterad till dokumentets vänstra sidokant. Denna typ av egendom används ofta vid evenemanget. PageY-egendom.
Syntax
event.PageX
Exempel
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. Sida
Detta är sidtypegenskapen som används för att returnera positionen för muspekaren som är relaterad till dokumentets övre sidokant. Denna typ av egendom används ofta vid evenemanget. PageX egendom.
Syntax
event.PageY
Exempel
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. resultat
Egenskapen händelse.resultat används för att innehålla det föregående eller det sista värdet som returneras av händelseshanteraren som specifikt utlöses av den specifika händelsen.
Syntax
event.result
Exempel
$("button").click(function()(
return "Hi there!";
));
10. preventDefault ()
Den här händelsrelaterade händelsen.preventDefault () -metoden används för att stoppa standardåtgärden för ett visst element från att hända. Exemplen på detta scenario inkluderar:
Förhindra att en skicka-knapp skickas in ett formulär
Förhindra att en länk får åtkomst till en viss URL.
En speciell händelse, till exempel event.preventDefault (), används för att kontrollera om metoden eller funktionen preventDefault () används för att ringa händelsen.
Syntax
event.preventDefault()
Exempel
$("a").click(function(event)(
event.preventDefault();
));
11. Event.target ()
Den här egenskapen används för att returnera vilket DOM-element som ska utlösas av denna händelse. Det är ofta än inte användbart att jämföra händelsen. Target mot detta som ska göras för att avgöra om den specifika händelsen hanteras på grund av en händelse som kallas bubblande.
Syntax
event.target
Exempel
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. timeStamp
Den här egenskapen används för att returnera antalet millisekunder sedan tiden 1 januari 1970, vilket motsvarar första gången då händelsen först startades.
Syntax
event.TimeStamp
Exempel
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. typ
Detta används för att övervaka händelsen och dess typ som utlöses.
Syntax
event.type
Exempel:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. vilken ()
Den här egenskapen används för att returnera tangentbordsknappen eller musknappen som tryckts in för händelsen.
Syntax
event.which
Exempel
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. fokus ()
Den här egenskapen och fokus för denna händelse inträffar när ett element används för att få fokus som uppstår när det väljs med musklick eller genom att navigera på en flik på den. Fokusmetoden används för att trigga fokushändelsen eller koppla en funktion som ska köras när en fokusrelaterad händelse inträffar.
Syntax
$(selector).focus()
Exempel
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. sväva ()
Denna svävningsmetod används för att specificera två funktioner som används för att köra när muspekaren svävar över alla element som är valda. Denna metod utlöser både musmåls- och mushändelseshändelser. Om det bara finns en funktion som anges, kommer den att köras för både musmallen och musmässiga händelser.
Syntax
$(selector).hover(inFunction, outFunction)
Exempel
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. keydown ()
Ordningen på händelserna som är relaterade till keydown-händelse är:
- Keydown: Detta används när nyckeln är på väg ner.
- Knapptryck: Detta inträffar när tangenten på tangentbordet trycks ned
- Keyup: Som namnet antyder, används detta när tangenten på den uppåtgående sidan trycks ned.
Syntax
$(selector).keydown()
Exempel
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. knapptryckning ()
Ordningen på händelserna som är relaterade till knapptryckningshändelse är:
- Keydown: Detta används när nyckeln är på väg ner.
- Knapptryck: Detta inträffar när tangenten på tangentbordet trycks ned
- Keyup: Som namnet antyder, används detta när tangenten på den uppåtgående sidan trycks ned.
Syntax
$(selector).keypress()
Exempel
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. keyup ()
Ordningen på händelserna som är relaterade till keyup-händelse är:
- Keydown: Detta används när nyckeln är på väg ner.
- Knapptryck: Detta inträffar när tangenten på tangentbordet trycks ned
- Keyup: Som namnet antyder, används detta när tangenten på den uppåtgående sidan trycks ned.
Syntax
$(selector).keyup()
Exempel
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. Live ()
Denna levande () -metod eller -funktion för jquery används för att ansluta en eller flera händelsebaserade hanterare som ska användas särskilt för de valda elementlistorna och den anger också vilken funktion som ska köras där händelserna inträffar. Alla evenemangshanterare bifogas med metoden live () som fungerar för både aktuella och FUTURE-element som är baserade på att matcha väljselementen som kan vara som ett nytt element skapat av skriptet. Die () -metoden kan användas för att förstöra metoden Live ().
Syntax
$(selector).live(event, data, function)
Exempel
$("button").live("click", function()(
$("p").slideToggle();
));
21. Belastning ()
Lastmetoden används för att koppla en händelsehanterare till den lastbaserade händelsen. Lasthändelsen inträffar varje gång en specificerad Denna händelse inträffar och fungerar varje gång de element som är associerade med URL: en, t.ex. bild, ram, skript, iframe och fönsterobjekt. Laddningshändelsen kanske kanske inte utlöser och det beror på webbläsaren även om bilden är cache. Det finns också en AJAX-metod som är en jquery-metod som kallas last (), den som kallas beror på parametrarna.
Syntax
$(selector).load(function)
Exempel
$("img").load(function()(
alert("stuff loaded.");
));
22. Mousedown
Denna händelse inträffar endast när vänster muspekarknapp trycks ned över den valda listan över elementet. Metoden eller funktionen mousedown () används för att utlösa denna händelse som kopplar en funktion och den körs när en mousedown-händelse inträffar. Denna metod används ofta tillsammans med metoden med musen ().
Syntax
$(selector).mousedown()
Exempel
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. Av ()
Den här metoden används för att ta bort en händelseshanterare som är bifogad tillsammans med metoden on (). Det kan sägas vara ersättningen av metoden oblind (), matris () och undelegat (). Den här metoden används för att få mycket konsistens till API: et och det rekommenderas alltid att använda den här metoden eftersom den används för att förenkla Jquery-kodbasen.
Syntax
$(selector).off(event, selector, function(eventObj), map)
Exempel
$("button").click(function()(
$("p").off("click");
));
24. muscenter ()
Den här händelsen inträffar när muspekaren är över det angivna elementet och kommer in när den utlöser händelsen för musenter eller den används för att bifoga en funktion som kan användas för att köras när en muscenter baserad händelse inträffar.
Syntax
$(selector).mouseenter()
Exempel
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. mouseleave ()
Denna händelse inträffar när muspekaren är över det angivna elementet och lämnar när det utlöser händelsen av musen lämnar eller den används för att fästa en funktion som kan användas för att köras när en musbaserad händelse inträffar.
Syntax
$(selector).mouseleave()
Exempel
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
Jquery är ett av de mest använda biblioteken när det gäller utveckling av gränserna. Detta ger unika funktioner och ett brett utbud av funktioner som hjälper till att göra utvecklarnas och människors liv enkelt och bekvämt. Hoppas att du gillade vår artikel. Håll dig uppdaterad på vår blogg för mer som dessa.
Rekommenderade artiklar
Detta är en guide till jQuery-evenemang. Här diskuterar vi listan över de vanligaste och ofta använda olika händelserna i jQuery med Syntax och exempel. Du kan också titta på följande artiklar för att lära dig mer -
- jQuery Effects
- jQuery Methods
- jQuery Attribut
- Hur installerar Jquery?
- Topp 8 jQuery-väljare med kodimplementering
- Guide till exempel på JQuery Progress Bar
- Guide till olika JavaScript-händelser