✅ Управљање догађајима помоћу јКуери -ја

Преглед садржаја

Да ли вам је овај водич помогао?

Тхе догађајима су ситуације које се дешавају у оквиру нашег документа ХТМЛ, могу се покренути ситуацијама самог система или радњама корисника. У оба случаја, када дође до догађаја, могуће је извршити накнадну обраду помоћу јКуери, тако да можемо постићи боље ефекте у нашим програмима.
Ово је од највеће важности, јер познавајући овај аспект и уз помоћ оквира можемо нашим веб страницама и апликацијама дати више динамике.
Ово је прва ствар на коју треба да одговоримо када радимо са догађајима у јКуери, Већ смо рекли да су догађаји радње или ситуације које покреће систем или корисник, на пример, када се документ заврши са учитавањем система, покреће догађај спреман или спреман, када корисник кликне на елемент, активира се хомонимни догађај.
Имајући на уму ове мале примере, тада можемо видети основну синтаксу за руковање било којом врстом догађаја, а то је следеће:

$ (селецтор) .он ("евентНаме", фунцтион () {….})

Подсетимо се или разјаснимо да је селектор име са којим ћемо лоцирати елемент у нашем документу, а затим уз помоћ методе .на () Тада можемо да му кажемо који догађај треба да слуша и када га открије може да изврши анонимну функцију унутар нашег одељка скрипти у ХТМЛ.
Нешто занимљиво што можемо истаћи је да можемо користити а руковалац за разне догађајеДругим речима, исту акцију можемо извести за неколико ситуација, само морамо навести различите догађаје које морамо слушати, синтакса је врло слична оној коју смо управо видели.
$ (селецтор) .он ("евентнаме1 евентнаме2 евентнаме3….", фунцтион () {….})
Пошто знамо оно најосновније, морамо и то почети да знамо јКуери Увек ће нам олакшати живот као програмерима, па је обезбедио неке пречице за креирање руковаоца догађајима, при чему не морамо да дајемо потпуну декларацију као што смо видели у претходном делу, већ ове пречице применимо директно на бирач.
Погледајмо неке од најзанимљивијих пречица које користе програмери. Треба напоменути да то није потпуна листа доступних. Да бисте добили ову листу, боље је да одете директно у званичну документацију, међутим, да бисте мало започели субјекта, ово је више него довољно.
спреман ()Покреће се када сви елементи документа СУНЦЕ учитавају се, односно када је страница спремна, отуда и њен назив. Треба напоменути да је ово системски догађај.
прихвати ()То се дешава када направимо а подношење обрасцаЗанимљиво је да када се образац појави, он се не шаље на традиционалан начин, већ се чека на оно што му овај догађај говори, тако да га можемо користити као посредну тачку за валидације поља да споменемо пример његове употребе.
кликните ()Покреће се када то ради корисник кликните са показивачем миша на елементу, може бити из поља за унос, да укључи елементе као што су или сидра . Како бисмо могли рећи је ли догађај покренуо корисник.
замућење ()Догађа се када елемент на коме се тренутно налазимо није фокусиран, на пример пишемо у текстуално поље и идемо на следеће поље, у овом случају прво поље је изгубило фокус и овај догађај се извршава.
фокус ()За разлику од претходног догађаја, то се догађа управо када се фокусирамо на елемент.
лебдети ()Овај догађај се дешава када показивач миша задржимо изнад неког елемента СУНЦЕ, обично се може применити на и сидра .
изабери ()Појављује се када изаберемо елемент унутар поља изаберитеНа пример, имамо падајућу листу и бирамо ставку из њеног садржаја.
цханге ()Појављује се када се промени вредност или стање елемента, на пример унутар поља изаберите, када променимо опцију за коју видимо да се ту одражава.
Будући да знамо мало о догађајима који се најчешће користе, генерират ћемо мали документ који неке од њих примјењује у пракси, било у њиховој пуној синтакси или с примјерима, тако да можемо експериментирати с оба облика.
У следећем коду видећемо како ћемо у почетку писати цонсоле.лог () када имамо документ спреман (), тада ћемо примијенити другу поруку када пређемо мишем преко а да потврдите како то функционише лебдети, коначно ћемо видети како се користи кликните () И фокус () за приказ других порука. Погледајмо код који описује горе наведено:

Пример догађаја 1

Покажите миша над овим Дивом !!

Напишите нешто овде:

Фокус на мене:

$ (доцумент) .реади (фунцтион () {цонсоле.лог ("Спремни догађај се догодио !!");}); $ ("# ховер евент"). ховер (фунцтион () {цонсоле.лог ("Догађај лебдења се догодио!");}); $ ("# Цлицк евент"). Цлицк (фунцтион () {цонсоле.лог ("активирали смо догађај Цлицк

ЕНЛАРГЕ

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

 $ (селецтор) .он ({ЕвентНаме1: фунцтион () {…}, ЕвентНаме2: фунцтион () {…}});

Као што видимо, када користимо овај облик синтаксе, избегавамо да морамо да радимо нешто попут следећег:

 $ (селектор) .СхортцутЕвент1 (фунцтион () {}); $ (селектор) .СхортцутЕвент2 (фунцтион () {});

Оно што нам омогућава да будемо организованији, међутим, оба су валидна и на програмеру је да примени ону која му највише одговара.
Пошто знамо како да повежемо више догађаја са елементом, спровешћемо га у дело, изабраћемо догађаје кликните () И фокус () За овај пример, онда ћемо их применити на два елемента, у првом ћемо генерисати исти одговор за сваки од њих, а у другом ће сваки догађај имати свој одговор. Погледајмо код који морамо да изведемо да бисмо постигли свој циљ:

 Пример догађаја 2
Више догађаја има исти резултат:

Различити резултати по догађају:
$ ("# елемент1"). он ("фокус на клик", функција () {цонсоле.лог ("приказујемо исто за 3 догађаја!");}); $ ("# елемент2"). он ({цлицк: фунцтион () {цонсоле.лог ("кликнули смо на елемент2");}, фоцус: фунцтион () {цонсоле.лог ("фокусирали смо се на елемент2") ;}});

Овде видимо да морамо бити опрезни са другим обликом различитих одговора за различите догађаје, будући да се догађаји не налазе унутар наводника као када то радимо у првом облику, такође морамо да их ставимо у заграде {} све унутар методе .на (), ово је грешка која се може појавити врло често па је овим мјерама опреза можемо избјећи. Погледајмо сада како изгледа наш пример када га покренемо у прегледачу:

ЕНЛАРГЕ

Бележимо бројач са а број 2 када се догоде догађаји у првом елементу, то значи да смо исту радњу извршили два пута како смо планирали. У другом елементу примећујемо да одштампамо две одређене радње у конзоли, иако такође видимо да се дешавају другачијим редоследом од оног у којем смо их поставили, то је зато што се догађај фокус се дешава пре кликните у хијерархији догађаја, посебно ако користимо кључ ТАБ да се крећу између поља.
На крају овог водича научили смо како да почнемо у свету руковања догађајима јКуериОво је само отварање уста, међутим с овим малим функцијама можемо постићи много тога у нашим апликацијама.

Да ли вам је овај водич помогао?

Ако не

ПОМОЗИТЕ ПОБОЉШАЈТЕ ОВАЈ ВОДИЧ!

Мислите ли да можете исправити или побољшати овај водич? Можете послати своје издање са променама које сматрате корисним.
0 корисника је уредило ово упутство. Уредите и постаните признати стручњак!
Измените овај водич

СЛИЧНИ ВОДИЦИ

Како превлачити и преузимати слике помоћу ЈКуери корисничког интерфејсаКако направити Спиннер или икону учитавања помоћу ЈКуери -јаЈКуери додаци и библиотеке за веб развојФлекигрид динамичка мрежа са ЈКуери и ПХПРуковање ЈСОН -ом са Ноде.јсУправљање догађајима у Ноде.јс -уРуковање баферима у Ноде.јс -уРегуларни изрази са Јкуери

Нема коментара, будите први!

Не чекајте више и уђите у СолветицОставите своје коментаре и искористите кориснички налог Придружите нам се!

Региструј сеРегиструјте се БЕСПЛАТНО да бисте имали свој Солветиц налогРегиструјте
ИдентифиДа ли већ имате налог? Пријавите се овдеИдентификујте ме на мом налогу