Výukový program jQuery (část 4) - posluchači událostí

Dnes to vykopneme do zářezu a skutečně ukážeme, kde jQuery svítí - Události. Pokud jste postupovali podle minulých tutoriálů, měli byste nyní docela dobře rozumět základní kódové struktuře jQuery Výukový program jQuery - Začínáme: Základy a výběry jQuery Výukový program - Začínáme: Základy a výběry Minulý týden jsem mluvil o tom, jak důležité je jQuery pro každého moderního webového vývojáře a proč je to úžasné. Tento týden si myslím, že je čas, abychom si zašpinili ruce nějakým kódem a zjistili jsme, jak… (a všechny příšerné složené závorky, které s tím souvisí), a také jak najít prvky DOM a některé věci, které můžete udělat pro manipulaci je Úvod do jQuery (část 2): Metody a funkce Úvod do jQuery (část 2): Metody a funkce Toto je část pokračujícího úvodního úvodu do programovací série webů jQuery. Část 1 se zabývala základy jQuery o tom, jak ji zahrnout do vašeho projektu, a selektory. V části 2 budeme pokračovat…. Také jsem vám ukázal, jak přistupovat k vývojářské konzoli v Chromových problémech s webovými stránkami pomocí vývojářských nástrojů prohlížeče Chrome nebo Firebug. Chodit s webovými stránkami pomocí vývojářských nástrojů Chrome nebo Firebug Pokud jste dosud sledovali mé tutoriály jQuery, možná jste již narazili na některé problémy s kódem a není známo, jak je opravit. Když čelíme nefunkčnímu kódu, je to velmi ... a jak jej můžete použít k ladění kódu jQuery..

Události - mimo jiné - umožňují reagovat na věci, které se dějí na interakci stránky a uživatele - kliknutí, rolování a vše, co se vám líbí.

Co je vlastně událost?

Pro ty, kteří začínají programovat a které mají nějaké grafické rozhraní, se události vztahují na jakýkoli druh interakce mezi uživatelem a aplikací; nebo mohou být generovány interně jiným procesem. Aplikace vyberou, ke kterým událostem se mají “poslouchej”, a když je událost spuštěna, mohou nějakým způsobem reagovat.

Například klepnutím na obrazovku iPhone vygenerujete jeden “událost klepnutí” s souřadnicí x, y přesně tam, kde jste klepli. Pokud klepnete na konkrétní objekt, například na tlačítko, je pravděpodobné, že tlačítko tuto událost poslouchalo a podle toho provede nějakou akci. Pokud se jednalo pouze o prázdnou část rozhraní, k události nebylo nic připojeno a tak se nic nestane.

Přetažením prstu po obrazovce by se vygenerovala další událost, která obsahuje informace o počátečním a koncovém bodě tažení a možná i rychlosti. Události nám poskytují snadný způsob reagovat na věci, které se stávají.

Snadné: kliknutím

Snad nejjednodušší událostí, kterou lze poslouchat, je událost click, která se spustí vždy, když uživatel klikne na prvek. To nemusí být konkrétní “tlačítko” - můžete posluchače událostí připojit k čemukoli na obrazovce, ale jako vývojář webu musíte samozřejmě udělat intuitivní. Vytvoření pseudodlačítka z písmene A skryté v odstavci textu je možné, ale poněkud hloupé.

Postupy pro připojení posluchače událostí se v průběhu let významně změnily, jak se vyvíjel jQuery, ale toto je aktuálně přijímaná metoda používající on ():

$ (selektor) .on (událost, akce);

Poslouchat a “klikněte” událost na jakýchkoli prvcích třídy .Klikni na mě, a poté přihlaste zprávu do konzole obsahující text prvku, na který jste klikli, byste udělali:

$ (". clickme"). on ("click", function () console.log ($ (this) .text ()););

Měli byste vidět, že akce, kterou jsme zde vložili, je anonymní funkce, která používá tento selektor (který odkazuje na jakýkoli objekt jQuery, který právě řeší) - v tomto případě na věc, na kterou bylo kliknuto. Potom extrahujeme text tohoto kliknutého objektu a přihlásíme ho do konzole. Snadno, správně?

Zastavit výchozí akci:

Někdy se budete chtít připojit k něčemu, jako je tlačítko pro odeslání odkazu nebo formuláře, které obvykle dělá něco jiného. V takovém případě je pravděpodobné, že nechcete, aby se tato původní akce provedla - místo toho chcete udělat nějakou fantastickou AJAX nebo speciální kouzlo jQuery.

Abychom předešli této výchozí akci, máme praktickou metodu zvanou preventDefault. Očividně. Podívejme se, jak by to fungovalo při řešení tlačítka pro odeslání formuláře

$ ("# myForm"). on ("submit", function (event) console.log (event); event.preventDefault (); return false;);

Několik změn zde - za prvé, připojujeme se k internetu Předložit událost místo kliknutí. To je vhodnější, když uživatel pracuje s formulářem tab-space, udeřil vstoupit, nebo zasáhnout Předložit tlačítko - to vše by spustilo výchozí akci formuláře. Proměnnou event také předáváme anonymní funkci, takže můžeme odkazovat na data události. Pak jsme použili event.preventDefault () v kombinaci s vrátit nepravdivé k zastavení všech obvyklých akcí.

V tomto případě je to pouze protokolování události do konzole, ale ve skutečnosti byste pravděpodobně měli obsluhující AJAX zde, s kterým se budeme zabývat v následující lekci.

Události mohou být také spuštěny vámi

V minulých dvou příkladech jsme použili metodu on k poslechu události, ale událost můžete také spustit ručně tak, že ji místo toho zavoláte jako metodu. Je těžké pochopit, proč byste to mohli použít k vynucení “klikněte”, ale dává větší smysl, pokud se podíváme na událost zaměření.

Zaostření se obvykle používá u vstupních polí k vypálení zprávy, když uživatel klepne do pole a zadá text - například instruktážní zprávu ve formátu, který má použít. Můžete jej však také použít k vynucení uživatele do pole uživatelského jména, když se stránka načte - takže mohou okamžitě začít psát své přihlašovací údaje.

$ (document) .ready (function () $ ('# username'.focus (););

Pokud jste také připojili posluchače událostí fokusu k tomuto poli uživatelského jména, spustilo by se to i při vynucení fokusu. Události lze proto spouštět i poslouchat.

Prozatím cvičte připojením k různým událostem na stránce - najdete úplný seznam všech dostupných událostí zde - nezapomeňte použít preventDefault, pokud jde o odkaz nebo tlačítko, a podívejte se, jaký výstup získáte z konzole o datech událostí.

Nechám to tam dnes, když jsme na konci této mini-série jQuery tutoriálů. Nakonec byste si měli být jisti, že na svou stránku hodíte nějaké jQuery a uděláte z toho něco. Příští týden se podíváme na AJAX - důležitou část moderního webu, která vám umožní načítat a odesílat požadavky na pozadí bez přerušení uživatele.

Jako vždy, zpětná vazba, otázky, komentáře a problémy jsou vítány níže.

Obrazový kredit: Dotyková obrazovka přes Shutterstock