ЈКуери Туториал (4. део)

Реклама

Данас ћемо то подићи и стварно показати где јКуери блиста - догађаји. Ако сте пратили прошле туторијале, сада бисте требали да добро разумете основна структура кода јКуери јКуери Туториал - Први кораци: Основе и изборнициПрошле недеље сам говорио о томе колико је јКуери важан сваком модерном веб програмеру и зашто је то феноменално. Ове недеље мислим да је време да се умажемо руке неким кодом и научимо како ... Опширније (и све ужасне коврчаве наруквице које иду уз то), као и како пронаћи елементе ДОМ-а и неке ствари које можете да урадите да бисте њима манипулирали Увод у јКуери (други део): Методе и функцијеОво је део сталног увода за почетнике у јКуери серију веб програма. Први део је покренуо основе јКуери-а о томе како га укључити у свој пројекат и селекторе. У другом делу, наставићемо са ... Опширније . Такође сам вам показао како да приступите конзола за програмере у Цхроме-у Откријте проблеме са веб локацијама помоћу алата за програмере Цхроме или Фиребуг-аАко сте досад пратили моје јКуери туторијале, можда сте већ наишли на неке проблеме са кодом и нисте знали како да их решите. Када се суочите са нефункционалним битним кодом, то је врло ...

Опширније и како га можете користити за уклањање погрешака свог јКуери кода.

Догађаји - између осталог - омогућавају да реагујете на ствари које се дешавају на страници и интеракције корисника - кликање, листање и све те маштовите ствари.

Шта је догађај уопште?

За оне нове у програмирању који укључују неку врсту графичког сучеља, догађаји се односе на било какву интеракцију између корисника и апликације; или могу бити генерисани интерно неким другим процесом. Апликације бирају које догађаје треба „слушати“, а када се тај догађај покрене, могу реаговати на неки начин.

На пример, додиривањем екрана иПхоне-а генерираће се један „догађај тапкања“ са к, и координатом тачно где сте додирнули. Ако сте додирнули одређени објекат, као што је дугме, вероватно је да је дугме преслушавало тај догађај и према томе извршиће неку радњу. Ако је то само празан део интерфејса, ништа се није прикључило догађају и тако се ништа неће догодити.

Превлачење прста по екрану створиће још један догађај, који укључује информације о почетној и крајњој тачки покрета повлачења, а можда и о брзини. Догађаји нам пружају једноставан начин реагују на ствари које се догађају.

Лако: Клик

Можда је најлакши догађај за слушање догађај клика који се покреће сваки пут када корисник кликне на неки елемент. Ово не мора да буде одређено „дугме“ - можете да причврстите слушаоца догађаја на било шта на екрану, али као веб програмер то очигледно требате учинити интуитивним. Стварање псеудо дугмета из писма а скривен у одломку текста је могућ, али помало глуп.

Методе прикључивања слушатеља догађаја значајно су се мењале током година како се јКуери развијао, али ово је тренутно прихваћени метод, користећи на():

$(селектор).на(догађај,поступак);

Да слушам „кликни“Догађај на било којим елементима са предавањем .кликни ме, а затим пријавите поруку на конзолу која садржи текст елемента на који сте кликнули, учинили бисте:

$ (". цлицкме"). он ("клик", функција () { цонсоле.лог ($ (ово) .тект ()); });

Требали бисте бити у могућности да видите да је акција коју смо овдје уградили анонимна функција која користи ово селектор (који се односи на који предмет се јКуери тренутно бави) - у овом случају ствар на коју су кликнули. Затим извадимо текст тог кликнутог објекта и забележимо га на конзоли. Лако, зар не?

Зауставите подразумевану радњу:

У неком тренутку ћете желети да се прикључите на нешто попут везе или дугмета за слање обрасца, што обично чини нешто друго. У том случају, врло је вероватно да не желите да се изведе та оригинална радња - уместо тога, желите да урадите неки феноменални АЈАКС или посебну јКуери магију.

Да бисмо спречили да се задана радња не догоди, имамо згодан метод који се зове превенДефаулт. Очигледно. Да видимо како би то функционисало када се ради о гумбу за слање форме

$ ("# миФорм"). он ("предај", функција (догађај) { цонсоле.лог (догађај); евент.превентДефаулт (); ретурн фалсе; });

Неколико промена овде - прво се придружујемо прихвати догађај уместо клика. Ово је погодније када се ради о обрасцу који корисник може табулаторни простор, хит уђиили ударите прихвати дугме - што би све покренуло подразумевану радњу форме. Такође преносимо променљиву догађај у анонимну функцију, тако да можемо да се обратимо на подаци о догађајима. Затим смо користили евент.превентДефаулт () у комбинацији са ретурн фалсе да зауставим довршење свих уобичајених радњи.

У овом случају догађај се само евидентира на конзоли, али у стварности бисте овде вероватно имали АЈАКС хандлер, о чему ћемо решити у следећој лекцији.

Догађаји вас могу покренути и ви

У претходна два примера користили смо метод он за слушање догађаја, али можете и ручно покренути догађај тако што ћете га позвати као методу. Тешко је схватити зашто то можете користити да бисте приморали „клик“, али има више смисла ако погледамо догађај фокусирања.

Фокус се обично користи са пољем за унос за испуштање поруке када корисник кликне на оквир да би унео текст - упутну поруку о формату који се користи, на пример. Али можете је користити и да примора корисника у поље за корисничко име када се страница учита - тако да могу одмах почети са уносом података за пријаву.

$ (документ) .реади (функција () { $ ('# корисничко име'.фоцус (); });

Ако бисте на то поље корисничког имена додали и слушатеља фокуса, оно би се покренуло и када сте форсирали фокус. Догађаји се стога могу и покренути и преслушати.

За сада вежбајте додавањем различитих догађаја на страници - можете пронаћи пуни списак свих догађаји доступни овде - сјетите се да користите превенцијеДефаулт ако је веза или дугме, и погледајте какав излаз ћете добити из конзоле о подацима догађаја.

Оставицу га данас данас док се близимо крају ове мини серије туторијала о јКуери-у. На крају би требало да будете довољно сигурни да баците јКуери на своју страницу и натерате га да нешто учини. Следеће недеље размотрићемо АЈАКС - важан део модерног веба који омогућава учитавање и слање захтева у позадини без ометања корисника.

Као и увек, повратне информације, питања, коментари и проблеми добродошли су у наставку.

Кредитна слика: Екран осетљив на додир преко Схуттерстоцк-а