jQuery návod – (7) Události

Pavel Kovář
25.09.2023 18:33

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

Reklama
Reklama
Zavřít reklamu