Syntaks
element. på musen over = funksjon ( ) { myScript } ;
I syntaksen ovenfor:
- element: Den spesifiserer det bestemte HTML-elementet som '
', '
', '
' osv.
- funksjon(): Den representerer den definerte funksjonen som vil bli påkalt ved hendelsestriggeren.
- myScript: Det refererer til funksjonsdefinisjonen for å utføre den spesifikke oppgaven når 'onmouseover'-hendelsen inntreffer.
Syntaks(Med 'addEventListener()'-metoden)
element. addEventListener ( 'mus over' , myScript ) ;
I syntaksen ovenfor, ' addEventListner() '-metoden legger til ' på musen over ”-hendelse for utføring av JavaScript-funksjonen for å utføre noen oppgaver.
Eksempel 1: Bruk av 'onmouseover'-hendelsen til å vise varslingsboks basert på grunnleggende syntaks
I dette scenariet, en ' på musen over ' hendelse kan assosieres med ' ”, dvs. avsnitts-HTML-element for å vise varslingsboksen med den angitte meldingen ved hendelsesutløseren.
HTML-kode
Ta først en titt på følgende HTML-kode:
< h2 juster = 'senter' > Vis varsel Eske Ved hjelp av 'på museover' Begivenhet h2 >< p på museover = 'prøve()' > Hold musepekeren på dette avsnitt for å få opp en varslingsboks. s >
I koden ovenfor:
- Først legger du til en underoverskrift av nivå 2 via ' ” tag og sett dens justering til “senter”.
- Deretter inkluderer du et avsnitt som har en tilknyttet ' på musen over ' hendelse som omdirigerer til funksjonen kalt ' prøve() ” som vil bli utløst når musepekeren på dette avsnittet.
JavaScript-kode
Oversikt over JavaScript-koden nedenfor:
< manus >funksjonseksempel ( ) {
varsling ( 'onmouseover-hendelse utløst' ) ;
}
manus >
I kodebiten ovenfor, funksjonen ' prøve() ' erklæres å vise ' varsling '-boksen med den angitte meldingen når 'onmouseover'-hendelsen utløses.
Produksjon
Denne utgangen indikerer at når musen svever over avsnittet, dukker 'varsel'-boksen opp og viser den angitte meldingen.
Eksempel 2: Bruk av «onmouseover»-hendelsen for å endre bakgrunnsfarge basert på «addEventListener()»-metodens syntaks
Dette eksemplet bruker «onmouseover»-hendelsen med «addEventListener()»-metoden for å endre avsnittet « bakgrunnsfarge ” ved hendelsesutløseren.
HTML-kode
HTML-koden er gitt nedenfor:
< h2 juster = 'senter' > Bytt bakgrunn Farge Ved hjelp av 'på museover' Begivenhet h2 >< p id = 'test' > Hold musepekeren på dette avsnitt for å endre bakgrunnsfargen. s >
I kodelinjene ovenfor:
- På samme måte er ' element oppretter en nivå 2 underoverskrift justert på ' senter '.
- Etter det, ' '-elementet representerer avsnittet som har en id 'test'.
JavaScript-kode
Fortsett nå til følgende JavaScript-kode:
< manus >dokument. getElementById ( 'test' ) . addEventListener ( 'mus over' , demo ) ;
funksjonsdemo ( ) {
dokument. getElementById ( 'test' ) . stil . bakgrunn = 'rosa' ;
}
manus >
I kodeblokken ovenfor:
- « getElementById() '-metoden brukes kombinert med ' addEventListener() ”-metoden for å hente avsnittet via dens tilknyttede id “test”, og assosiere “mouseover”-hendelsen med den angitte funksjonen som argument.
- Definer nå funksjonen ' myfunc() '.
- I funksjonsdefinisjonen er ' document.getElementById() '-metoden bruker ' stil.bakgrunn ”-egenskapen for å endre avsnittets bakgrunnsfarge ved hendelsesutløseren.
Produksjon
Som sett, ' bakgrunnsfarge ” i avsnittet har blitt endret etter den utløste hendelsen, dvs. “mouseover”.
Konklusjon
JavaScript tilbyr den innebygde ' på musen over ”-hendelse som utløser en ønsket handling ved å holde musepekeren over HTML-elementet. Den påkaller JavaScript-funksjonen for å utføre den angitte handlingen på hendelsesutløseren. Det kan implementeres med '