Události

JQuery muže reagovat na spoustu událostí, vyvolané uživatelem i prohlížečem. Jednu událost už umíme, konkrétně událost, která zachytí načtení dokumentu.

$(document).ready(function() {
    mojefunkce();
});

Na tomto případě vidíte typickou syntaxi pro zachycení události. Nejdříve je element, se který chceme pracovat, další je název události a nakonec to, co chceme udělat. Nejdříve se však doporučuji podívat na článek o klíčovém slově this. Jednou z nejpoužívanějších událostí je kliknutí myší na určitý element.

// HTML část
<div id="muj_odstavec">Lorem ipsum dol sit amet</div>
<button id="tlacitko">Schovej/Zobraz</button>

// jQuery část
$("#tlacitko").click(function(){   // když se klikne na tlačítko, schová/zobrazí se muj_odstavec
         $("#muj_odstavec").toggle(2000);
 });

Kód je ekvivalentní s tímto:

// HTML část
<div id="muj_odstavec">Lorem ipsum dol sit amet</div>
<button id="tlacitko">Schovej/Zobraz</button>

// jQuery část
$("#tlacitko").bind('click', function(){   // když se klikne na tlačítko, schová/zobrazí se muj_odstavec
         $("#muj_odstavec").toggle(2000);
});

Na všechny události můžeme použít druhý kód, ale obráceně to neplatí. První kód je zkrácená verze toho druhého a vznikla z důvodu zjednodušení a zpřehlednění kódu. Následuje ukázka s klíčovým slovem this.

// HTML část
<p>Lorem ipsum
<p>Dol sit amet
<p>... :)

// jQuery část
$("p").click(function(){   
         $(this).toggle(2000);
});

Událostí je celá řada a v podstatě se všemi se pracuje podobně, proto uvedu pouze seznam událostí, na které není potřeba používat funkci bind(), protože ostatních událostí je opravdu mnoho.

• change() - když je změněn obsah, používá se u selectboxu, radia a selectu - na konci bude ukázka
• click()
• dblclick() - dovojklik
• event.pageX - vzdálenost kurzoru myši od osy X
• event.pageY - vzdálenost kurzoru myši od osy Y
• hover() - když je nad elementem kurzor myši - na konci bude ukázka
• keydown() - zmáčknutí tlačítka
• keypress() - držení tlačítka
• keyup() - puštění tlačítka
• load() - načtení elementu
• mousedown() - držení tlačítka myši nad elementem
• mouseenter() - vstup myši nad elementem
• mouseleave() - když myš opustí element
• mousemove() - pohnutí myši nad elementem
• mouseout() - opuštění elementu kurzorem
• mouseover() - přejetí myši nad elementem
• resize() - změna velikosti (třeba okna prohlížeče)
• scroll() - scrollování
• toggle() - vysvětlení a ukázka na konci
• submit() - zachycení odeslání formuláře

Z ostatních uvedu například práci s textem, konkrétně:

• copy - kopírování textu
• paste - vložení textu
• cut - vyjmutí textu

Tyto tři události se používají s bind, tedy:

$("#prvek").bind("paste", function() { 
     alert("Právě jste vložili text.");  // alert() - vyskakovací okno s textem
}); 

Také můžeme pomocí jQuery zabránit, aby z vaší stránky kdokoliv kopíroval.

$("body").bind("copy", function() { 
     return false;    // zabrání kopírování do schránky
}); 

Lze to bohužel obejít, ale jako ochrana proti amatérům to stačí. A nakonec slíbené příklady. První příklad bude na funkci hover().

$('#leve_menu a').hover(
    function() {
      $(this).addClass('hover_leve_menu');
    }, function() {
      $(this).removeClass('hover_leve_menu');
    }
);

Třídu hover_leve_menu je potřeba nadefinovat v CSS souboru. Funkce hover se skládá ze dvou částí. První část je kód, který se vykoná při aktivaci elementu a druhá část se spustí po opuštění elementu. Další je ukázka na select. Kód vypíše položku, která je práve označená.

// HTML část
<select name="sweets" multiple="multiple">
    <option>Chocolate</option>
    <option selected="selected">Candy</option>

    <option>Taffy</option>
    <option selected="selected">Caramel</option>
    <option>Fudge</option>
    <option>Cookie</option>

  </select>
  <div></div>
  
// jQuery část
$("select").change(function () {
          var str = "";
          $("select option:selected").each(function () { 
          // funkce each zajistí, že se kód použije na každý element
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();

Článek o událostech vztahujích se k AJAXu, najde zde.

Jeden kód k více událostem

Možná se vám už stalo, že jste potřebovali na více událostí použít stejný kód.

$("#odstavec")
     .bind("click", function(){
          $("this").toggle(2000);
     })
     .bind("mouseover", function(){
          $("this").toggle(2000);
     });

Ale s jQuery můžeme kód zkrátit pomocí multi-bindingu.

$("#odstavec").bind("click mouseover", function(){
     $("this").toggle(2000);
});