jQuery Gebeurtenis Metodes

jQuery is pasgemaak om te reageer op gebeure in 'n HTML-bladsy.

Wat is gebeure?

Al die verskillende besoekers se handelinge waarop 'n webblad kan reageer, word gebeurtenisse genoem.

'n Gebeurtenis verteenwoordig die presiese oomblik wanneer iets gebeur.

Voorbeelde:

beweeg 'n muis oor 'n element
kies 'n radioknoppie
klik op 'n element

Die term "brande/vuur" word dikwels met gebeurtenisse gebruik. Voorbeeld: "Die sleuteldrukgebeurtenis word afgevuur, die oomblik wat jy 'n sleutel druk".

Hier is 'n paar algemene DOM-geleenthede:

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-sintaksis vir gebeurtenismetodes

In jQuery het die meeste DOM-gebeurtenisse 'n ekwivalente jQuery-metode.

Om 'n klikgebeurtenis aan alle paragrawe op 'n bladsy toe te ken, kan jy dit doen:

$("p").click();

Die volgende stap is om te definieer wat moet gebeur wanneer die gebeurtenis brand. Jy moet 'n funksie na die geleentheid deurgee:

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

Algemeen gebruikte jQuery-gebeurtenismetodes

$(document).ready()

Die $(document).ready()metode stel ons in staat om 'n funksie uit te voer wanneer die dokument volledig gelaai is. Hierdie gebeurtenis word reeds in die jQuery Sintaksis hoofstuk verduidelik.

klik ()

Die click()metode heg 'n gebeurtenis hanteerder funksie aan 'n HTML element.

Die funksie word uitgevoer wanneer die gebruiker op die HTML-element klik.

Die volgende voorbeeld sê: Wanneer 'n klikgebeurtenis op 'n <p>element brand; versteek die huidige <p>element:

Voorbeeld

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

dblclick()

Die dblclick()metode heg 'n gebeurtenis hanteerder funksie aan 'n HTML element.

Die funksie word uitgevoer wanneer die gebruiker op die HTML-element dubbelklik:

Voorbeeld

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

muisinvoer()

Die mouseenter()metode heg 'n gebeurtenis hanteerder funksie aan 'n HTML element.

Die funksie word uitgevoer wanneer die muiswyser die HTML-element ingaan:

Voorbeeld

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

muisleaf()

Die mouseleave()metode heg 'n gebeurtenis hanteerder funksie aan 'n HTML element.

Die funksie word uitgevoer wanneer die muiswyser die HTML-element verlaat:

Voorbeeld

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

muisaf()

Die mousedown()metode heg 'n gebeurtenis hanteerder funksie aan 'n HTML element.

Die funksie word uitgevoer wanneer die linker-, middel- of regtermuisknoppie afgedruk word, terwyl die muis oor die HTML-element is:

Voorbeeld

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

muisop()

Die mouseup()metode heg 'n gebeurtenis hanteerder funksie aan 'n HTML element.

Die funksie word uitgevoer wanneer die linker-, middel- of regtermuisknoppie vrygestel word, terwyl die muis oor die HTML-element is:

Voorbeeld

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

sweef()

Die hover()metode neem twee funksies en is 'n kombinasie van die mouseenter()en mouseleave() metodes.

Die eerste funksie word uitgevoer wanneer die muis die HTML-element binnegaan, en die tweede funksie word uitgevoer wanneer die muis die HTML-element verlaat:

Voorbeeld

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

fokus()

Die focus()metode heg 'n gebeurtenis hanteerder funksie aan 'n HTML vorm veld.

Die funksie word uitgevoer wanneer die vormveld fokus kry:

Voorbeeld

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

vervaag ()

Die blur()metode heg 'n gebeurtenis hanteerder funksie aan 'n HTML vorm veld.

Die funksie word uitgevoer wanneer die vormveld fokus verloor:

Voorbeeld

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

Die on() metode

Die on()metode heg een of meer gebeurtenishanteerders vir die geselekteerde elemente aan.

Heg 'n klikgeleentheid aan 'n <p>element:

Voorbeeld

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

Heg veelvuldige gebeurtenishanteerders aan 'n <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 Oefeninge