jQuery návod – (7) Události

Vítejte v sedmém dílu našeho seriálu o jQuery. Události jsou základním stavebním kamenem interaktivity každého webového rozhraní. S jejich pomocí můžete reagovat na akce uživatelů, jako je klikání na tlačítka, posunutí myši, změna formulářových prvků a mnoho dalších. Dnešní díl vám ukáže, jak s událostmi pracovat v jQuery.

1. Zachytávání událostí

Základním krokem je naučit se, jak „chytit“ událost. S jQuery je to velmi jednoduché.

$("#tlacitko").click(function() {
    alert("Bylo kliknuto!");
});

2. Různé typy událostí

Existuje mnoho různých typů událostí, které můžete zachytit:

• click: Kliknutí myší.
• dblclick: Dvojklik myší.
• mouseenter: Myš vstoupí do prvku.
• mouseleave: Myš opustí prvek.
• keydown: Stisk klávesy.
• keyup: Uvolnění klávesy.
• submit: Odeslání formuláře.

A mnoho dalších. Pro každý typ události existuje v jQuery odpovídající metoda, např. click(), dblclick() atd.

3. Více akcí pro jednu událost

Pokud chcete vykonat více akcí po zachycení události, jednoduše je přidejte do funkce:

$("#tlacitko").click(function() {
    alert("Bylo kliknuto!");
    $(this).addClass("aktivni");
});

4. Zastavení propagace události

Někdy chcete zastavit propagaci události, tj. zabránit dalším posluchačům událostí ve zpracování téže události:

$("#odkaz").click(function(event) {
    event.stopPropagation();
    alert("Odkaz nebude následován!");
    return false;
});

5. Výchozí akce

Některé události mají svou výchozí akci. Například kliknutí na odkaz vede k jeho následování. Pokud chcete tuto výchozí akci zrušit:

$("#odkaz").click(function(event) {
    event.preventDefault();
    alert("Odkaz nebude následován!");
});

6. Připojení a odpojení posluchačů událostí

on(): Připojí posluchač události.

$("#prvek").on("click", funkceReakce);

off(): Odpojí posluchač události.

$("#prvek").off("click", funkceReakce);

Závěr

Události v jQuery nabízí silný nástroj pro tvorbu interaktivních webových stránek a aplikací. Dnes jsme se naučili, jak zachytávat různé události, jak reagovat na ně a jak s nimi pracovat efektivně.

V příštím díle se zaměříme na rozměry a pozi