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

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

Шта је програмирање вођено догађајима?

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

Шта је слушалац догађаја?

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

Креирање слушаоца догађаја помоћу ЈаваСцрипт-а

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

Функција аддЕвентЛистенер() има следећу основну структуру:

елемент.аддЕвентЛистенер("догађај", фунцтионТоЕкецуте);

Где:

• тхе елемент може представљати било коју ХТМЛ ознаку (од дугмета до пасуса)
• тхе "догађај" је стринг који именује одређену, препознату радњу
• тхе фунцтионТоЕкецуте је референца на постојећу функцију

Хајде да направимо следећу веб страницу која има неколико ХТМЛ елемената:

Добродошли


 Здраво, добродошли на моју веб страницу.


Сазнајте више





Подаци о кориснику

Корисничко име: 

прихвати

ХТМЛ код изнад креира једноставну страницу која повезује са ЈаваСцрипт датотеком под називом апп.јс. Тхе апп.јс датотека ће садржати код за подешавање слушалаца догађаја. Дакле, ако желите да покренете одређени процес сваки пут када корисник кликне на прво дугме на веб страници, ово је датотека у којој ћете га креирати.

Датотека апп.јс

доцумент.куериСелецтор('.бтн').аддЕвентЛистенер("клик", цлицкДемо)
функција цлицкДемо(){
 цонсоле.лог("Здраво")
}

ЈаваСцрипт код изнад приступа првом дугмету на страници помоћу куериСелецтор() функција. Затим додаје слушалац догађаја овом елементу користећи аддЕвентЛистенер() методом. Конкретан догађај који слуша има назив „клик“. Када дугме покрене тај догађај, слушалац ће позвати цлицкДемо() функција.

Повезан: Научите како да користите ДОМ селекторе

Тхе цлицкДемо() функција штампа „Здраво“ на конзоли претраживача. Сваки пут када кликнете на дугме, требало би да видите овај излаз у својој конзоли.

Излаз догађаја „клик“.

Шта су догађаји миша?

ЈаваСцрипт има а МоусеЕвент интерфејс који представља догађаје који се дешавају услед интеракције корисника са мишем. Неколико догађаја користи МоусеЕвент приступ. Ови догађаји укључују следеће:

• клик
• дблцлицк
• моусемове
• Миша преко
• моусеоут
• моусеуп
• моуседовн

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

Још један уобичајени догађај миша је дблцлицк, што значи двоструки клик. Ово се активира када корисник кликне дугме миша два пута узастопно. Изванредна ствар о аддЕвентЛистенер() функција је да је можете користити да доделите више слушалаца догађаја једном елементу.

Додавање дблцлицк догађаја на прво дугме

доцумент.куериСелецтор('.бтн').аддЕвентЛистенер("дблцлицк", дблцлицкДемо)
функција дблцлицкДемо(){
 алерт("Ово је демонстрација како да се направи догађај двоструког клика")
}

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

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

Имена осталих догађаја миша на листи описују њихово понашање. Тхе моусемове догађај се дешава сваки пут када корисник помери миша када је курсор изнад елемента. Тхе моусеуп Догађај се дешава када корисник задржи дугме изнад елемента, а затим га отпусти.

Шта су догађаји на тастатури?

ЈаваСцрипт има а КеибоардЕвент приступ. Ово ослушкује интеракције између корисника и његове тастатуре. У прошлости, КеибоардЕвент имала три типа догађаја. Међутим, ЈаваСцрипт је од тада застарео притисак дугмета догађај.

Дакле, кеиуп и кеидовн догађаји су једина два препоручена догађаја на тастатури, а то су све што вам треба. Тхе кеидовн догађај се дешава када корисник притисне тастер, а кеиуп догађај се дешава када га корисник отпусти.

Поново погледајући ХТМЛ пример изнад, најбоље место за додавање слушаоца догађаја са тастатуре је на улазни елемент.

Додавање слушаоца догађаја на тастатури у апп.јс датотеку

лет греетингс = доцумент.куериСелецтор('п');
доцумент.куериСелецтор('инпут').аддЕвентЛистенер("кеиуп", цаптуреИнпут)
функција цаптуреИнпут (е){
 греетингс.иннерТект = (`Здраво ${е.таргет.валуе}, добродошли на моју веб локацију.`)
}

Код изнад користи куериСелецтор() функција за приступ параграфу и улазни елемената на страници. Затим позива аддЕвентЛистенер() метод на улазни елемент, који слуша за кеиуп догађај. Кад год а кеиуп догоди се догађај, тј цаптуреИнпут() функција узима кључну вредност и додаје је параграфу на страници. Тхе е параметар представља догађај, који ЈаваСцрипт додељује аутоматски. Овај објекат догађаја има својство, циљ, који је референца на елемент са којим је корисник ступио у интеракцију.

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

Параграф сада садржи улазну вредност која је, у горњем примеру, „Јане Дое“.

аддЕвентЛистенер снима све врсте интеракција корисника

Овај чланак вас је упознао са аддЕвентЛистенер() метод, као и неколико догађаја миша и тастатуре које можете користити са њим. У овом тренутку знате како да слушате одређени догађај и како да креирате функцију која реагује на њега.

Тхе аддЕвентЛистенер пружа додатну могућност, међутим, преко свог трећег параметра. Можете га користити да контролишете ширење догађаја: редослед којим се догађаји крећу од елемената до њихових родитеља или деце.

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

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

Реад Нект

О аутору