Inleiding tot jQuery-evenementen
JQuery is een van de meest populaire en meest gebruikte javascript-bibliotheken die is ontwikkeld en ontworpen om de op HTML gebaseerde DOM-architectuur te vereenvoudigen, dwz de eigenschappen van het documentobjectmodel zoals lezen, manipulatie en boomverplaatsing. De andere eigenschappen van jQueries zoals event handling, Ajax, styling en CSS-animatie zijn ook vereenvoudigd. Het is een open-source en een gratis bibliotheek die meestal wordt gebruikt in 73% van de ca. 10 miljoen websites die vandaag worden gebruikt. De kernfuncties van Jquery omvatten op DOM-elementen gebaseerde eigenschappen zoals selectors, manipulatie en boomverplaatsing, waardoor het werken aan JQuery veel interessanter, eenvoudiger en handiger wordt.
Het wordt gebruikt om een zeer eenvoudige en eenvoudig ogende interface te bieden die kan worden gebruikt voor het toepassen van verschillende soorten verbazingwekkende effecten. Deze methoden maken ook snel gebruik en toepassing van de meest gebruikte functies en hun effecten mogelijk, samen met minimale tot minimale configuraties. De basiscommando's, zoals die voor het tonen en verbergen van elementen, zijn vrijwel hetzelfde en anderen rusten ook in dezelfde categorie met wat iemand die ze wil zien zou verwachten. show () -opdracht, in dit geval, wordt gebruikt om de elementen in een geheel verpakt weer te geven en een gecombineerde set en hide () -opdracht wordt gebruikt om die functies te verbergen.
Jquery is op maat gemaakt en wordt gebruikt om te reageren op de gebeurtenissen op een HTML-pagina. De gebeurtenissen op zichzelf zijn de acties van de verschillende bezoekers waarop de webpagina kan reageren. Met andere woorden, een gebeurtenis wordt gebruikt om het precieze of het exacte moment enigszins weer te geven, met name iets dat is gebeurd. Dit kan scenario's zijn zoals onze muis over het element bewegen, klikken en het keuzerondje selecteren en ook op het element klikken. De term vuren of de term ontslagen wordt vaak samen met de gebeurtenis gebruikt. De toetsaanslaggebeurtenis wordt bijvoorbeeld geactiveerd of in de volksmond aangeduid als 'geactiveerd', dit is voornamelijk het moment waarop u op de toets drukt. Hier is de lijst met de meest voorkomende en meest gebruikte DOM-evenementen.
Muisgebeurtenissen zoals dblclick, muismuis, muiscentrum, klik. Er zijn ook enkele andere toetsenbordgebeurtenissen, zoals Keypress, keyup en keydown. Er zijn andere vormen van gebeurtenissen, zoals gebeurtenissen voor wijzigen, verzenden, vervagen en scherpstellen. Er zijn andere gebeurtenissen die document- of venstergebeurtenissen zijn, zoals formaat wijzigen, laden, bladeren, verwijderen, enz. In Jquery. De meeste op DOM gebaseerde gebeurtenissen hebben de bijbehorende jquery-methode. Om een nieuwe gebeurtenis toe te wijzen aan alle bestaande alinea's op de pagina, kan daarom de onderstaande syntaxis worden gebruikt.
Evenementen en syntaxis van jQuery
Hier zijn de volgende gebeurtenissen van jQuery met onderstaande syntaxis
1. Klik op ()
Deze gebeurtenis vindt plaats wanneer op het element wordt geklikt. Deze click () -methode wordt gebruikt om het aangeklikte element te activeren, ook wel de click-gebeurtenis genoemd, die wordt gebruikt om aan een functie te koppelen wanneer een gebeurtenis met een klik optreedt.
Syntaxis
$(selector).click()
Wanneer u een functie wilt toevoegen aan deze klikgebeurtenis,
$(selector).click(function)
De volgende stap komt altijd samen met de actie en de trigger die de feitelijke werking en werking van de functie vormt en daarom moet wanneer de gebeurtenis wordt geactiveerd, een functie aan de gebeurtenis worden doorgegeven.
Voorbeeld
$("p").click(function()(
// action which is triggered goes here!! ));
2. Dblclick ()
Deze methode wordt gebruikt om een event-handlerfunctie aan het verstrekte HTML-element te koppelen. Deze functie wordt uitgevoerd wanneer de gebruiker dubbelklikt op het gegeven HTML-element.
Syntaxis
$(selector).dblclick()
Voorbeeld
$("p").dblclick(function()(
$(this).hide();
));
3. wijzigen ()
Deze gebeurtenis vindt plaats wanneer de waarde van een bepaald element wordt gewijzigd, dwz het werkt alleen voor de invoer, het tekstgebied en de geselecteerde elementen. De methode change () wordt gebruikt om een wijzigingsgebeurtenis te activeren of degene die aan de functie wordt gekoppeld wanneer een wijzigingsgerelateerde gebeurtenis moet plaatsvinden.
Syntaxis
$(selector).change()
Voorbeeld
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. vervagen ()
Deze gebeurtenis met betrekking tot vervaging treedt alleen op wanneer het element de focus verliest. De methode blur () die wordt gebruikt om de gebeurtenis blur te activeren of de methode die wordt gebruikt om een functie toe te voegen die moet worden uitgevoerd wanneer zich een vervagingsgebeurtenis voordoet. Deze methode wordt vaak gebruikt met de focus () -methode.
Syntaxis
$(selector).blur()
Voorbeeld
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. gegevens
Deze eigenschap event.data wordt gebruikt om de optionele doorgegeven gegevens te bevatten die betrekking hebben op een gebeurtenismethode wanneer de uitvoerende handler voor de huidige is gebonden.
Syntaxis
event.data
Voorbeeld
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. naamruimte
Deze eigenschap wordt gebruikt om aangepaste naamruimte te retourneren wanneer de gebeurtenis wordt geactiveerd. De eigenschap wordt gebruikt om te worden ingesteld door auteurs van plug-ins die kunnen worden gebruikt om taken heel anders af te handelen, afhankelijk van de gebruikte naamruimte. De naamruimten die beginnen met het onderstrepingsteken zijn gereserveerde naamruimten voor JQuery.
Syntaxis
event.namespace
Voorbeeld
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. PageX
Dit is de eigenschap paginatype die wordt gebruikt om de positie van de muisaanwijzer te retourneren die is gerelateerd aan de linkerrand van het document. Dit soort onroerend goed wordt vaak gebruikt bij het evenement. PageY eigendom.
Syntaxis
event.PageX
Voorbeeld
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. PaginaY
Dit is de eigenschap paginatype die wordt gebruikt om de positie van de muisaanwijzer te retourneren die is gerelateerd aan de bovenrand van het document. Dit soort onroerend goed wordt vaak gebruikt bij het evenement. PageX eigenschap.
Syntaxis
event.PageY
Voorbeeld
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. resultaat
De eigenschap event.result wordt gebruikt om de vorige of de laatste waarde te bevatten die wordt geretourneerd door de gebeurtenishandler die specifiek wordt geactiveerd door de specifieke gebeurtenis.
Syntaxis
event.result
Voorbeeld
$("button").click(function()(
return "Hi there!";
));
10. preventDefault ()
Deze gebeurtenisgerelateerde methode event.preventDefault () wordt gebruikt om de standaardactie van een bepaald element te stoppen. De voorbeelden van dit scenario zijn onder meer:
Voorkomen dat een verzendknop een formulier verzendt
Voorkom dat een link toegang krijgt tot een bepaalde URL.
Een bepaalde gebeurtenis zoals event.preventDefault () wordt gebruikt om te controleren of de methode preventDefault () wordt gebruikt om de gebeurtenis aan te roepen.
Syntaxis
event.preventDefault()
Voorbeeld
$("a").click(function(event)(
event.preventDefault();
));
11. Event.target ()
Deze eigenschap wordt gebruikt om terug te geven welk DOM-element door deze gebeurtenis moet worden geactiveerd. Het is meestal niet nuttig om de gebeurtenis te vergelijken. Hiermee moet worden bepaald of de bepaalde gebeurtenis wordt afgehandeld vanwege een gebeurtenis die bubbelen wordt genoemd.
Syntaxis
event.target
Voorbeeld
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. tijdstempel
Deze eigenschap wordt gebruikt om het aantal milliseconden terug te geven sinds de tijd van 1 januari 1970, wat overeenkomt met de eerste keer dat de gebeurtenis voor het eerst daadwerkelijk werd geactiveerd.
Syntaxis
event.TimeStamp
Voorbeeld
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. type
Dit wordt gebruikt om de gebeurtenis en het type te controleren dat wordt geactiveerd.
Syntaxis
event.type
Voorbeeld:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. welke ()
Deze eigenschap wordt gebruikt om terug te keren naar de toetsenbordtoets of muisknop die is ingedrukt voor de gebeurtenis.
Syntaxis
event.which
Voorbeeld
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. focus ()
Deze eigenschap en de focus voor deze gebeurtenis vindt plaats wanneer een element wordt gebruikt om de focus te krijgen die optreedt wanneer het wordt geselecteerd door de muisklik of door er een tabblad naartoe te navigeren. De methode focus () wordt gebruikt om de focusgebeurtenis te activeren of een functie toe te voegen die moet worden uitgevoerd wanneer een focusgerelateerde gebeurtenis optreedt.
Syntaxis
$(selector).focus()
Voorbeeld
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. zweven ()
Deze zweefmethode wordt gebruikt om twee functies op te geven die worden gebruikt wanneer de muisaanwijzer over alle geselecteerde elementen zweeft. Deze methode activeert zowel de muismuis- als de muisentergebeurtenissen. Als er slechts één functie is opgegeven, wordt deze uitgevoerd voor zowel de muismuis- als de muisenter-gebeurtenis.
Syntaxis
$(selector).hover(inFunction, outFunction)
Voorbeeld
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. keydown ()
De volgorde van de evenementen die gerelateerd zijn aan keydown-evenement zijn:
- Keydown: dit wordt gebruikt wanneer de sleutel op weg is naar beneden.
- Keypress: dit gebeurt wanneer de toets van het toetsenbord wordt ingedrukt
- Keyup: Zoals de naam al doet vermoeden, wordt dit gebruikt wanneer de toets van de bovenzijde wordt ingedrukt.
Syntaxis
$(selector).keydown()
Voorbeeld
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. toets indrukken ()
De volgorde van de gebeurtenissen die gerelateerd zijn aan toetsdrukgebeurtenis is:
- Keydown: dit wordt gebruikt wanneer de sleutel op weg is naar beneden.
- Keypress: dit gebeurt wanneer de toets van het toetsenbord wordt ingedrukt
- Keyup: Zoals de naam al doet vermoeden, wordt dit gebruikt wanneer de toets van de bovenzijde wordt ingedrukt.
Syntaxis
$(selector).keypress()
Voorbeeld
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. keyup ()
De volgorde van de gebeurtenissen die gerelateerd zijn aan keyup-gebeurtenis is:
- Keydown: dit wordt gebruikt wanneer de sleutel op weg is naar beneden.
- Keypress: dit gebeurt wanneer de toets van het toetsenbord wordt ingedrukt
- Keyup: Zoals de naam al doet vermoeden, wordt dit gebruikt wanneer de toets van de bovenzijde wordt ingedrukt.
Syntaxis
$(selector).keyup()
Voorbeeld
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. Live ()
Deze lives () -methode of -functie van de jquery wordt gebruikt om een of meer op gebeurtenissen gebaseerde handlers te koppelen die met name voor de geselecteerde lijsten met elementen moeten worden gebruikt en geeft ook de functie aan die moet worden uitgevoerd waar de gebeurtenissen plaatsvinden. Alle event-handlers zijn gekoppeld met de methode live (), die werkt voor zowel de huidige als de FUTURE-elementen, die zijn gebaseerd op het matchen van de selector-elementen die kunnen lijken op een nieuw element dat door het script is gemaakt. De methode die () kan worden gebruikt om de methode live () te vernietigen.
Syntaxis
$(selector).live(event, data, function)
Voorbeeld
$("button").live("click", function()(
$("p").slideToggle();
));
21. Laad ()
De laadmethode wordt gebruikt om een gebeurtenishandler aan de op belasting gebaseerde gebeurtenis te koppelen. De laadgebeurtenis vindt plaats telkens wanneer een opgegeven Deze gebeurtenis plaatsvindt en werkt wanneer de elementen die aan de URL zijn gekoppeld, zoals afbeelding, frame, script, iframe en het vensterobject. De laadgebeurtenis kan al dan niet worden geactiveerd en is afhankelijk van de browser, zelfs als de afbeelding in de cache is opgeslagen. Er is ook een AJAX-methode, een jquery-methode die load () wordt genoemd, de methode die wordt aangeroepen, is afhankelijk van de parameters.
Syntaxis
$(selector).load(function)
Voorbeeld
$("img").load(function()(
alert("stuff loaded.");
));
22. Mousedown
Deze gebeurtenis vindt alleen plaats wanneer de linkermuisknop wordt ingedrukt over de geselecteerde lijst van het element. De methode of functie mousedown () wordt gebruikt om deze gebeurtenis te activeren die een functie vastmaakt en wordt uitgevoerd wanneer een gebeurtenis met mousedown plaatsvindt. Deze methode wordt vaak samen met de methode mouseup () gebruikt.
Syntaxis
$(selector).mousedown()
Voorbeeld
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. Uit ()
Deze methode wordt gebruikt om een gebeurtenishandler te verwijderen die is gekoppeld aan de methode on (). Men kan zeggen dat het de vervanging is van de methode unbind (), die () en methode undelegate (). Deze methode wordt gebruikt om de API veel consistentie te bieden en het wordt altijd aanbevolen om deze methode te gebruiken, omdat deze wordt gebruikt om de Jquery-codebasis te vereenvoudigen.
Syntaxis
$(selector).off(event, selector, function(eventObj), map)
Voorbeeld
$("button").click(function()(
$("p").off("click");
));
24. mouseenter ()
Deze gebeurtenis vindt plaats wanneer de muisaanwijzer zich boven het opgegeven element bevindt en binnenkomt wanneer het de muisenter-gebeurtenis activeert of het wordt gebruikt om een functie te koppelen die kan worden uitgevoerd wanneer een op muisenter gebaseerde gebeurtenis plaatsvindt.
Syntaxis
$(selector).mouseenter()
Voorbeeld
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. muizenval ()
Deze gebeurtenis vindt plaats wanneer de muisaanwijzer zich boven het opgegeven element bevindt en verlaat terwijl het de muisbladerengebeurtenis activeert of het wordt gebruikt om een functie uit te schakelen die kan worden gebruikt wanneer een op muizenval gebaseerde gebeurtenis plaatsvindt.
Syntaxis
$(selector).mouseleave()
Voorbeeld
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
Jquery is een van de meest gebruikte bibliotheken als het gaat om front-end ontwikkeling. Dit biedt unieke functies en een breed scala aan functies die helpen om het leven van ontwikkelaars en mensen overal gemakkelijk en handig te maken. Ik hoop dat je ons artikel leuk vond. Blijf op de hoogte van onze blog voor meer als deze.
Aanbevolen artikelen
Dit is een gids voor jQuery-evenementen. Hier bespreken we de lijst van de meest voorkomende en meest gebruikte verschillende evenementen van jQuery met Syntax en voorbeelden. U kunt ook de volgende artikelen bekijken voor meer informatie -
- jQuery-effecten
- jQuery-methoden
- jQuery-kenmerken
- Hoe Jquery te installeren?
- Top 8 jQuery-selectors met code-implementatie
- Handleiding voor voorbeelden van JQuery-voortgangsbalk
- Gids voor verschillende JavaScript-gebeurtenissen