Разумевање ширења догађаја у ЈаваСцрипт-у

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

У ЈаваСцрипт-у, догађаји који укључују интеракцију корисника обично се активирају на одређене елементе. На пример, клик на дугме покреће догађај на том дугмету. Али догађаји се такође пропагирају: пуцају на друге елементе у хијерархији докумената.

Читајте даље да бисте сазнали све о ширењу догађаја и два различита типа која су доступна.

Шта је руковање догађајима у ЈаваСцрипт-у?

Можете да користите ЈаваСцрипт код да ухватите и одговорите на догађаје које покреће веб страница. Ово можете да урадите да бисте заменили подразумевано понашање или предузели радњу када не постоји подразумевано. Уобичајен пример је валидација форме. Руковање догађајима вам омогућава да прекинете нормалан процес подношења обрасца.

Размотрите овај пример:

Кликни ме

Горњи код има елемент дугмета са ИД-ом под називом дугме. Има слушалац догађаја клика који приказује упозорење са поруком Здраво Свете.

Шта је ширење догађаја?

Ширење догађаја описује редослед којим догађаји путују кроз ДОМ дрво када их веб претраживач покрене.

Претпоставимо да постоји ознака обрасца унутар див ознаке и обе имају слушаоце догађаја онцлицк. Пропагација догађаја описује како се један слушалац догађаја може покренути за другим.

Постоје две врсте размножавања:

1. Бубљење догађаја, којим догађаји круже нагоре, од детета до родитеља.
2. Снимање догађаја, којим догађаји путују наниже, од родитеља до детета.

Шта је бублинг догађаја у ЈаваСцрипт-у?

Мехурићи догађаја значи да ће правац ширења догађаја бити од подређеног елемента ка његовом родитељском елементу.

Размотрите следећи пример. Има три угнежђена елемента: див, образац и дугме. Сваки елемент има а клик слушалац догађаја. Прегледач приказује узбуна са поруком када кликнете на сваки елемент.

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

 див


 форму 



 Дугме

Шта је снимање догађаја?

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

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

 див.аддЕвентЛистенер("клик", ()=>{
 упозорење("див")
 }, истина);
 форм.аддЕвентЛистенер("клик", ()=>{
 упозорење("образац")
 }, истина);
 буттон.аддЕвентЛистенер("клик", ()=>{
 упозорење ("дугме")
 }, истина);

Како можете спречити ширење догађаја?

Можете зауставити ширење догађаја помоћу стопПропагатион() методом. Тхе аддЕвентЛистенер() метода прихвата име догађаја и функцију руковаоца. Руковалац узима објекат догађаја као свој параметар. Овај објекат садржи све информације о догађају.

Када позовете стопПропагатион() методом, догађај ће престати да се шири од те тачке. На пример, када користите стопПропагатион() на елементу обрасца, догађаји ће престати да се појављују у див. Ако кликнете на дугме, видећете догађаје подигнуте на дугмету и обрасцу, али не и на див.

форм.аддЕвентЛистенер("клик", (е)=>{
е.стопПропагатион();
 алерт("образац");
});

Повезан: Тхе Ултимате ЈаваСцрипт Цхеат Схеет

ЈаваСцрипт има велику снагу испод хаубе

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

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

11 ЈаваСцрипт једноструких порука које треба да знате

Постигните много са само мало кода користећи овај широк спектар једноструких ЈаваСцрипт-а.

Реад Нект

О аутору