Урок за jQuery (част 4)

реклама

Днес ще го изритаме и наистина ще покажем къде блести jQuery - събития. Ако сте следвали предишните уроци, сега трябва да разбирате доста добре основна структура на кода на jQuery Урок за jQuery - Първи стъпки: Основи и селекториМиналата седмица говорих за това колко е важно jQuery за всеки модерен уеб разработчик и защо е страхотно. Тази седмица мисля, че е време да си изцапаме ръцете с някакъв код и да научим как ... Прочетете още (и всички ужасни къдрави брекети, които вървят с нея), както и как да намерите елементи на DOM и някои неща, които можете да направите, за да ги манипулирате Въведение в jQuery (Част 2): Методи и функцииТова е част от непрекъснатото въвеждане на начинаещи в серията за програмиране на jQuery. Част 1 обхваща основите на jQuery как да го включите във вашия проект и селектори. В част 2 ще продължим с ... Прочетете още . Също така ви показах как да получите достъп до конзола за програмисти в Chrome Открийте проблеми с уебсайта с инструменти за разработчици на Chrome или Firebug

Ако досега следвах уроците ми за jQuery, може би вече сте се сблъскали с някои проблеми с кода и не знаете как да ги коригирате. Когато се сблъскате с нефункционален бит код, това е много ... Прочетете още и как можете да го използвате за отстраняване на грешки в своя jQuery код.

Събития - наред с други приложения - ви позволяват да реагирате на неща, които се случват на страницата и взаимодействията на потребителите - щракване, превъртане и всички подобни фантазии.

Какво е събитие все пак?

За тези нови в програмирането, които включват някакъв графичен интерфейс, събитията се отнасят до всякакъв вид взаимодействие между потребителя и приложението; или може да бъде генериран вътрешно чрез някакъв друг процес. Приложенията избират кои събития да „слушат“ и когато това събитие се задейства, те могат да реагират по някакъв начин.

Например, докосването на екрана на вашия iPhone ще генерира единично „събитие на докосване“ с координата x, y точно от мястото, където сте натиснали. Ако сте натиснали върху определен обект, като бутон, вероятно е бутонът да е слушал за това събитие и съответно да извърши някакво действие. Ако това беше просто празна част от интерфейса, нищо не беше прикачено към събитието и така нищо няма да се случи.

Преместването с пръст по екрана би генерирало още едно събитие, което включва информация за началната и крайната точка на движението на влачене и може би скоростта. Събитията ни предоставят лесен начин за постигане реагират на неща, които се случват.

Лесно: Кликване

Може би най-лесното събитие за слушане е събитието за кликване, задействано всеки път, когато потребителят кликне върху елемент. Това не трябва да е конкретен „бутон“ - можете да прикачите слушател на събития към всичко на екрана, но като уеб програмист очевидно трябва да направите това интуитивно. Създаване на псевдо бутон от писмото а скрит в абзац от текст е възможен, но някак глупав.

Методите за прикачване на слушател на събития са се променили значително през годините с развитието на jQuery, но това е текущо приетият метод, като се използва На():

$(селектор).На(събитие,действие);

За да слушате „кликване”Събитие на всички елементи с класа .clickme, и след това регистрирайте съобщение до конзолата, съдържаща текст от щраквания върху елемента, ще направите:

$ ( ". Clickme"). На ( "клик", функция () { console.log ($ (това) .text ()); });

Трябва да можете да видите, че действието, което сме вградили тук, е анонимна функция, която използва това селектор (който се отнася до какъв обект се занимава в момента jQuery) - в този случай нещото, върху което е щракнат. След това извличаме текста на този щракнат обект и го записваме в конзолата. Лесно, нали?

Спрете действието по подразбиране:

В един момент ще искате да се прикачите към нещо като бутон за връзка или бутон за изпращане на формуляр, което обикновено прави нещо друго. В този случай е много вероятно да не искате това първоначално действие да се извърши - вместо това искате да направите някаква фантазия AJAX или специална магия jQuery.

За да предотвратим действието по подразбиране, имаме удобен метод, наречен prevenDefault. Очевидно е. Нека да видим как би работило това при справяне с бутон за подаване на формуляр

$ ("# myForm"). on ("изпрати", функция (събитие) { console.log (събитие); event.preventDefault (); върнете невярно; });

Няколко промени тук - първо, ние се привързваме към Изпращане събитие вместо щракване. Това е по-подходящо при работа с форма, каквато може да бъде потребителят раздела пространство, удари въведетеили натиснете a Изпращане бутон - всичко това би задействало по подразбиране действието на формата. Ние също предаваме променливата на събитието в анонимната функция, така че можем да се обърнем към данни за събитията. След това използвахме event.preventDefault () в комбинация с върнете невярно за да спрете всички обичайни действия от завършване.

В този случай се регистрира само събитието в конзолата, но в действителност тук вероятно ще имате AJAX манипулатор, с който ще се спрем в следващия урок.

Събитията могат да бъдат предизвикани и от вас

В последните два примера използвахме метода on, за да слушаме събитие, но можете също да задействате ръчно събитие, като го наречете вместо него. Трудно е да разберем защо можете да използвате това, за да наложите „щракване“, но има по-голям смисъл, ако разгледаме събитието за фокусиране.

Фокусът обикновено се използва с полета за въвеждане, за да се задейства съобщението, когато потребителят кликне в полето, за да въведе текст - например инструкционно съобщение за използвания формат, например. Но също така можете да го използвате, за да принудите потребителя в полето за потребителско име, когато страницата се зареди - така че те могат веднага да започнат да въвеждат данните си за вход.

$ (document) .ready (функция () { $ ( "# Username'.focus (); });

Ако също сте прикачили слушател на събитие за фокусиране към това поле за потребителско име, то ще бъде задействано и когато принудите фокусирането. Следователно събитията могат да бъдат задействани и слушани.

За сега практикувайте като прикачвате към различни събития на страницата - можете да намерите пълен списък на всички налични събития тук - не забравяйте да използвате prevenDefault, ако е връзка или бутон, и вижте какъв резултат получавате от конзолата относно данните за събитията.

Ще го оставя там днес, когато сме в края на тази мини-серия от уроци за jQuery. В края на това трябва да сте достатъчно уверени, за да хвърлите някои jQuery на вашата страница и да я накарате да направи нещо. Следващата седмица ще разгледаме AJAX - важна част от съвременната мрежа, която ви позволява да зареждате и изпращате заявки във фонов режим, без да прекъсвате потребителя.

Както винаги, отзивите, въпросите, коментарите и проблемите са добре дошли по-долу.

Кредит за изображение: Тъч скрийн чрез Shutterstock