Výukový program jQuery (část 4)

reklama

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á struktura jQuery Výukový program jQuery - Začínáme: Základy a výběrMinulý 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, jak ... Přečtěte si více (a všechny příšerné složené rovnátka, které s tím souvisí), a také jak najít prvky DOM a některé věci, které můžete udělat pro manipulaci s nimi Úvod do jQuery (část 2): Metody a funkceToto je část ú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 ... Přečtěte si více . Také jsem vám ukázal, jak přistupovat k internetu vývojářská konzole v Chromu Problémy s webovými stránkami s vývojářskými nástroji Chrome nebo Firebug

Pokud jste dosud sledovali moje návody jQuery, možná jste již narazili na některé problémy s kódem a nevěděli jste, jak je opravit. Když čelíme nefunkčnímu kódu, je to velmi ... Přečtěte si více 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, kdo začínají programovat, což zahrnuje grafické rozhraní nějakého druhu, události odkazují na jakýkoli druh interakce mezi uživatelem a aplikací; nebo mohou být generovány interně jiným procesem. Aplikace si vybírají, které události „poslouchají“ a kdy je událost spuštěna, mohou nějakým způsobem reagovat.

Například klepnutím na obrazovku iPhone vygenerujete jednu „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. Nemusí to být konkrétní „tlačítko“ - k čemukoli na obrazovce můžete připojit posluchače událostí, 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 jQuery vyvíjel, ale toto je aktuálně přijímaná metoda používající na():

$(volič).na(událost,akce);

Poslechnout “klikněte“Událost na jakýchkoli prvcích třídy .Klikni na mě, a poté přihlaste zprávu do konzoly 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í funkcí, 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. Snadné, že?

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 (); návrat 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 trefíte 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ě jde pouze o přihlášení události do konzole, ale ve skutečnosti byste pravděpodobně měli zde zpracovatele AJAX, s ní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í „kliknutí“, ale dává větší smysl, pokud se podíváme na událost zaostř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 události jsou k dispozici zde - nezapomeňte použít preventDefault, pokud se jedná 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ž se blížíme ke konci této mini-série tutoriálů jQuery. 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