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