WebDev.wiki > Návody pro webmastery a vývojáře > Práce s událostmi (eventy)

Práce s událostmi (eventy) - JQuery

vydáno: 19.12.2016, seriál: JQuery

Toto je 4. díl seriálu JQuery, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.

Již v minulém článku jsme lehce načali práci s událostmi. Pojďme si událost (angl. event) představit jako spouštěč nějaké funkce při nějaké příležitosti. jQuery nám opět usnadňuje způsob, jakým nastavíme webovou stránku tak, že při vybraných "příležitostech" / událostech bude spouštět ty funkce / operace, které nám přijdou vhod a následně nám usnadňuji práci s daty, které nám tyto události vygenerují.

Základní funkcí pro nastavování spouštěčů funkcí při událostech je jQuery metoda on():

$(výběr).on('názevUdálosti', callback) - názevUdálosti je řetězec, který označuje jednoduše při jakém typu události se má spustit callback funkce.

Ukázka:

Vyskakovací okno při kliku na tlačítko.

Javascript

$('button').on('click', function()
{
    alert('Button clicked!');
});

HTML

<button>Click Me</button>

Použité tagy: <button>

Seznam použitelných typů událostí lze najít v jQuery referenci.

Event argument

jQuery nám obvykle do naší callback funkce vloží i informace o události, která naši callback funkci aktivovala a to ve formě parametru. Tento parametr si můžeme pojmenovat třeba event a můžeme z něj získat všechny informace o události, které nám jQuery poskytne a nebo s událostí i pracovat.

Ukázka:

Výpis souřadnic kurzoru při klinutí někam do stránky.

Javascript

$('body').on('click', function(event)
{
    alert('The user has clicked to X: '+ event.pageX + ' Y: ' + event.pageY + ' coordinates.';
});

Ukázka:

Zrušení základní události při kliku na jakýkoli odkaz.

Javascript

function linkClikced(event)
{
    event.preventDefault();

    console.log('The user wanted to go to ' + event.target.href + ', but they shall not pass.');
}

$(document).ready(function()
{
    $('a').click(window.linkClikced);
});

HTML

<a href="http://example.com/">Go to Example.com</a>

Použité tagy: <a>

Zkratky

Existují i zkratkové metody pro události, které se používají často:

$(výběr).click(callback) - spustí se, pokud uživatel klikne na element.

$(výběr).dblclick(callback) - spustí se, pokud uživatel "pokliká" (dvakrát klikne) na element.

$(výběr).hover(callbackPřiVstupu, callbackPřiOpuštění) - callbackPřiVstupu se spustí v momentě, kdy uživatel najede kurzorem na element a callbackPřiOpuštění se spustí, když kurzor element opustí.

$(výběr).focus(callback) - spustí se v okamžiku "aktivace" elementu. Například, když uživatel tabulátorem přepne na vstupní políčko formuláře nebo na něj klikne.

$(výběr).change(callback) - spustí se v okamžiku nějaké "změny" elementu. Například, když tuto událost dáme na výběrové políčko formuláře <select> a uživatel z něj vybere nějakou <option>.

$(výběr).contextmenu(callback) - spustí se při kliknutí na element pravým tlačítkem myši.

$(výběr).keypress(callback) - spustí se, pokud má uživatel "aktivovaný" (focus) element a stiskne jakoukoli klávesu.

$(výběr).ready(callback) - spustí se v okamžiku, když se element plně načte.

$(výběr).resize(callback) - spustí se, pokud výběr změní velikost.

$(formulář).submit(callback) - spustí se při odeslání formuláře.

Existují další zkratky, o kterých se můžete dozvědět v referenci.

Ukázka:

Spuštění události při stisknutí klávesy Enter.

Javascript

function inputConfirmed(event)
{
    if (event.keyCode == 13) // if the pressed key is Enter
        alert('Input confirmed on #' + event.target.id);
}

$(document).ready(function()
{
    $('input').keypress(inputConfirmed)
});

HTML

<input id="command-line" type="text">

Použité tagy: <input>

Ukázka:

Výpis nových rozměrů vykreslovací oblasti prohlížeče do konzole (CTRL+SHIT+I).

Javascript

$(window).resize(function()
{
    console.log('New window dimensions! Width ', $(window).width(), ' height ', $(window).height());
});

Zrušení spouštěče události

Občas se hodí odebrat nějakou tu callback funkci z typu události pro nějaký element. Toho lze docílit pomocí metody .off().

$(výběr).off('typUdálosti' [, callback])

Ukázka:

Přidání a odebrání události kliknutím.

Javascript

function goodOneClicked()
{
    alert("I work!");
}

var isEventOn = true;

function toggleClickEvent()
{
    if (isEventOn)
    {
        $('#goodone').off('click');
        $('#evilone').html('Add click event to the other button');
    }
    else
    {
        $('#goodone').click(window.goodOneClicked);
        $('#evilone').html('Remove click event from the other button');
    }

    window.isEventOn = !window.isEventOn;
}

$(document).ready(function()
{
    $('#goodone').click(window.goodOneClicked);
    $('#evilone').click(window.toggleClickEvent);
});

HTML

<button id="goodone">Click me!</button>
<button id="evilone">Remove click event from the other button</button>

Použité tagy: <button>

Po tomto úvodu do práce s událostmi už si jistě budete vědět rady s událostmi ve vaší webové stránce. Pokud máte nějaké dotazy, využijte prosím komentáře pod článkem.

Příště se podíváme na získávání dat ze serveru pomocí techniky AJAX, přičemž nám bude samozřejmě asistovat jQuery.

jQuery: návody a průvodce

JavaScript: návody a průvodce

Seriál JQuery

Přejít na následující kapitolu:Získávání dat (AJAX) >

Témata

Seriály

Práce s událostmi (eventy) - JQuery

Event argument

Zkratky

Zrušení spouštěče události

Seriál JQuery

Seznam všech článků seriálu: