jQuery- gebeurtenismethoden

jQuery is op maat gemaakt om te reageren op gebeurtenissen in een HTML-pagina.

Wat zijn evenementen?

Alle verschillende acties van bezoekers waarop een webpagina kan reageren, worden gebeurtenissen genoemd.

Een gebeurtenis vertegenwoordigt het precieze moment waarop iets gebeurt.

Voorbeelden:

een muis over een element bewegen
een keuzerondje selecteren
klikken op een element

De term "branden / ontslagen" wordt vaak gebruikt bij evenementen. Voorbeeld: "De toetsdrukgebeurtenis wordt geactiveerd op het moment dat u op een toets drukt".

Hier zijn enkele veelvoorkomende DOM-evenementen:

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

jQuery-syntaxis voor gebeurtenismethoden

In jQuery hebben de meeste DOM-gebeurtenissen een equivalente jQuery-methode.

Ga als volgt te werk om een klikgebeurtenis toe te wijzen aan alle alinea's op een pagina:

$("p").click();

De volgende stap is om te definiëren wat er moet gebeuren als de gebeurtenis wordt geactiveerd. Je moet een functie doorgeven aan de gebeurtenis:

$("p").click(function(){
// action goes here!!
});

Veelgebruikte jQuery-gebeurtenismethoden

$(document).klaar()

De $(document).ready()methode stelt ons in staat om een functie uit te voeren wanneer het document volledig is geladen. Deze gebeurtenis is al uitgelegd in het hoofdstuk jQuery-syntaxis .

Klik()

De click()methode koppelt een gebeurtenishandlerfunctie aan een HTML-element.

De functie wordt uitgevoerd wanneer de gebruiker op het HTML-element klikt.

Het volgende voorbeeld zegt: Wanneer een klikgebeurtenis op een <p>element wordt geactiveerd; verberg het huidige <p>element:

Voorbeeld

$("p").click(function(){
$(this).hide();
});

dblklik()

De dblclick()methode koppelt een gebeurtenishandlerfunctie aan een HTML-element.

De functie wordt uitgevoerd wanneer de gebruiker dubbelklikt op het HTML-element:

Voorbeeld

$("p").dblclick(function(){
$(this).hide();
});

muisinvoer()

De mouseenter()methode koppelt een gebeurtenishandlerfunctie aan een HTML-element.

De functie wordt uitgevoerd wanneer de muisaanwijzer het HTML-element binnengaat:

Voorbeeld

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

muisblad()

De mouseleave()methode koppelt een gebeurtenishandlerfunctie aan een HTML-element.

De functie wordt uitgevoerd wanneer de muisaanwijzer het HTML-element verlaat:

Voorbeeld

$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

muis omlaag()

De mousedown()methode koppelt een gebeurtenishandlerfunctie aan een HTML-element.

De functie wordt uitgevoerd wanneer de linker-, middelste of rechter muisknop wordt ingedrukt, terwijl de muis zich boven het HTML-element bevindt:

Voorbeeld

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

muis omhoog()

De mouseup()methode koppelt een gebeurtenishandlerfunctie aan een HTML-element.

De functie wordt uitgevoerd wanneer de linker-, middelste of rechter muisknop wordt losgelaten, terwijl de muis zich boven het HTML-element bevindt:

Voorbeeld

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

zweven()

De hover()methode heeft twee functies en is een combinatie van de mouseenter()en mouseleave() methoden.

De eerste functie wordt uitgevoerd wanneer de muis het HTML-element binnengaat, en de tweede functie wordt uitgevoerd wanneer de muis het HTML-element verlaat:

Voorbeeld

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

focus()

De focus()methode koppelt een gebeurtenishandlerfunctie aan een HTML-formulierveld.

De functie wordt uitgevoerd wanneer het formulierveld focus krijgt:

Voorbeeld

$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

vervagen()

De blur()methode koppelt een gebeurtenishandlerfunctie aan een HTML-formulierveld.

De functie wordt uitgevoerd wanneer het formulierveld de focus verliest:

Voorbeeld

$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

De on()-methode

De on()methode koppelt een of meer event handlers aan de geselecteerde elementen.

Voeg een klikgebeurtenis toe aan een <p>element:

Voorbeeld

$("p").on("click", function(){
$(this).hide();
});

Koppel meerdere gebeurtenishandlers aan een <p>element:

Voorbeeld

$("p").on({
mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

jQuery-oefeningen