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