Руковање догађајима је важан концепт у ЈаваСцрипт-у. Догађаји омогућавају да ХТМЛ странице буду динамичне и интерактивне, што вам омогућава да креирате привлачне корисничке интерфејсе. Можете написати код за покретање ЈаваСцрипт-а када се догоди догађај на ДОМ-у.
Догађај може бити када корисник кликне на ХТМЛ елемент, када се страница учита или када се промени вредност поља за унос. Можете написати код који мења ХТМЛ структуру када се догоди неки догађај. Научите три различита начина на које можете да додате слушаоце догађаја у свој код.
1. Метода аддЕвентЛистенер
Метода аддЕвентЛистенер је једна од популарних методе слушања догађаја. Има три параметра:
- Објекат који представља догађај.
- Функција за руковање.
- Опциони логички, усеЦаптуре, који описује како се догађај шири кроз ДОМ.
Догађај може бити било који специфицирани ДОМ догађај на циљном елементу. Функција је подешена да одговори на тај догађај када се догоди.
Функција може бити анонимна или именована функција. Популарне мете укључују елемент, његову децу, документ и прозор који подржава догађај.
аддЕвентЛистенер() је препоручени метод за администрирање слушалаца догађаја у ЈаваСцрипт-у. Ради на било ком циљу догађаја, не само на ХТМЛ елементима, и подржава више руковалаца догађајима.
Можда ћете желети да извршите неки код на ДОМ-у. Можете одштампати текст, извршити прорачуне или приказати слику када корисник кликне на дугме.
Хајде да илуструјемо следећим кодом:
хтмл>
<хтмл>
<тело>
<х1>Метода аддЕвентЛистенер са функцијамах1>
<дугмеид="миБтн">Кликните овдедугме>
<стрид="демо">стр>
тело>
хтмл>Затим додајте слушаоца догађаја помоћу дугмета.
конст елемент = документ.гетЕлементБиИд("миБтн");
елемент.аддЕвентЛистенер("кликни", миФунцтион1);
функцијамиФунцтион1() {
документ.гетЕлементБиИд("демо").иннерХТМЛ += „Фукција извршена! "
}
Када кликнете на дугме, текст 'Фунцтион Екецутед' се штампа на екрану, као што је приказано испод.
2. Делегирање догађаја за аддЕвентЛистенер
Делегирање догађаја у ЈаваСцрипт-у је образац који се користи за руковање више догађаја. Уместо додавања слушаоца догађаја сваком елементу, само додајете слушалац догађаја елементу претка. Можете приступити елементу који је покренуо догађај преко .таргет својство објекта догађаја.
Ово осигурава да сви елементи на које циљате имају заједничко понашање. Без тога, морали бисте ручно да додате слушаоца догађаја сваком од њих.
Ево примера делегирања догађаја:
хтмл>
<хтмл>
<тело>
<х1> Делегирање догађаја на дугмадимах1>
<див>
<дугме>Дугме 1дугме>
<дугме>Дугме 2дугме>
<дугме>Дугме 3дугме>
див>
тело>
хтмл>
Затим додајте слушаоце догађаја свим дугмадима са само неколико линија кода.
конст див = документ.куериСелецтор('див')див.аддЕвентЛистенер("кликни", (догађај) => {
ако (евент.таргет.тагНаме 'БУТТОН') {
конзола.Пријава('Кликнуто дугме')
}
});
Делегирање догађаја је образац заснован на бубрењу догађаја. Мехурићи догађаја се дешавају када елемент прими догађај и преноси га својим надређеним и елементима претка у ДОМ-у. То је пропагирање догађаја концепт који се подразумевано дешава у ЈаваСцрипт-у.
3. Коришћење онцлицк атрибута
Можете да користите атрибут онцлицк да покренете ЈаваСцрипт када корисници кликну на елемент. Као и метод аддЕвентЛистенер, можете користити онцлицк метод за штампање текста, обављање прорачуна и промену карактеристика елемента на тхе ДОМ.
Можете додати ослушкивач догађаја онцлицк као инлине руковалац догађаја у ХТМЛ елемент. Догађај се дешава када корисник кликне на елемент. Промените боју следећег пасуса динамички помоћу онцлицк методе:
хтмл>
<хтмл>
<тело>
<х1> Изврши онЦлицк догађајех1>
<стрид="демо"онцлицк="мојаФункција()">
Кликните на мене да промените боју текста.
стр>
тело>
хтмл>У ЈаваСцрипт датотеку додајте следећи код:
функцијамиФунцтион() {
документ.гетЕлементБиИд("демо").стиле.цолор = "црвено";
}Излаз ће се појавити као што је приказано:
Зашто учити о слушаоцима догађаја?
Као ЈаваСцрипт програмер, често ћете користити слушаоце догађаја у пројектима. Можете креирати бројне функције са слушаоцима догађаја, укључујући појављивање и снимање догађаја. Разумевање ових концепата ће вам олакшати креирање динамичких интерфејса у вашим апликацијама.