Syntaks
element. over musen = fungere ( ) { myScript } ;
I ovenstående syntaks:
- element: Det specificerer det bestemte HTML-element såsom '
', '
', '
' osv.
- fungere(): Det repræsenterer den definerede funktion, der vil blive påkaldt ved hændelsesudløseren.
- myScript: Det refererer til funktionsdefinitionen for at udføre den specifikke opgave, når 'onmouseover'-hændelsen opstår.
Syntaks(Med 'addEventListener()'-metoden)
element. addEventListener ( 'mus over' , myScript ) ;
I ovenstående syntaks er ' addEventListner() '-metoden tillægger ' over musen ” hændelse for udførelse af JavaScript-funktionen for at udføre nogle opgaver.
Eksempel 1: Anvendelse af 'onmouseover'-hændelsen til visning af advarselsboks baseret på grundlæggende syntaks
I dette scenarie er en ' over musen ' begivenhed kan associeres med ' ”, dvs. afsnits-HTML-element for at vise advarselsboksen med den medfølgende meddelelse ved hændelsesudløseren.
HTML kode
Først skal du tage et kig på følgende HTML-kode:
< h2 justere = 'centrum' > Vis advarsel Boks Ved brug af 'på musen over' Begivenhed h2 >< p på musen over = 'prøve()' > Hold musen på det her afsnit for at pop op en advarselsboks. s >
I ovenstående kode:
- Tilføj først en underoverskrift på niveau 2 via ' ” tag og sæt dens justering til “center”.
- Dernæst skal du inkludere et afsnit med tilhørende ' over musen ' hændelse omdirigerer til funktionen med navnet ' prøve() ”, der vil blive udløst, når musen svæver på dette afsnit.
JavaScript kode
Oversigt nu den nedenfor angivne JavaScript-kode:
< manuskript >funktionseksempel ( ) {
alert ( 'onmouseover hændelse udløst' ) ;
}
manuskript >
I ovenstående kodestykke er funktionen ' prøve() ' erklæres for at vise ' alert ” boks med den angivne besked, når “onmouseover”-hændelsen udløses.
Produktion
Dette output indikerer, at når musen svæver over afsnittet, dukker 'advarselsboksen' op og viser den angivne meddelelse.
Eksempel 2: Anvendelse af 'onmouseover'-hændelsen for at ændre baggrundsfarve baseret på 'addEventListener()'-metodens syntaks
Dette eksempel anvender hændelsen 'onmouseover' med metoden 'addEventListener()' for at ændre afsnittet ' baggrundsfarve ” ved hændelsesudløseren.
HTML kode
HTML-koden er angivet nedenfor:
< h2 justere = 'centrum' > Skift baggrund Farve Ved brug af 'på musen over' Begivenhed h2 >< p id = 'prøve' > Hold musen på det her afsnit for at ændre baggrundsfarven. s >
I ovenstående kodelinjer:
- Ligeledes er ' ' element opretter en niveau 2 underoverskrift justeret ved ' centrum ”.
- Derefter vil ' ' element repræsenterer afsnittet med et id 'test'.
JavaScript kode
Fortsæt nu til følgende JavaScript-kode:
< manuskript >dokument. getElementById ( 'prøve' ) . addEventListener ( 'mus over' , demo ) ;
funktionsdemo ( ) {
dokument. getElementById ( 'prøve' ) . stil . baggrund = 'lyserød' ;
}
manuskript >
I ovenstående kodeblok:
- Det ' getElementById() ” metoden anvendes kombineret med ” addEventListener() ” metode til at hente afsnittet via dets tilknyttede id “test”, og associere “mouseover”-hændelsen med den angivne funktion som dets argument.
- Definer nu funktionen ' myfunc() ”.
- I funktionsdefinitionen er ' document.getElementById() '-metoden bruger ' stil.baggrund ” egenskab for at ændre afsnittets baggrundsfarve ved hændelsesudløseren.
Produktion
Som det ses er ' baggrundsfarve ' i afsnittet er blevet ændret efter den udløste hændelse, dvs. 'mouseover'.
Konklusion
JavaScript tilbyder den indbyggede ' over musen ” hændelse, der udløser en ønsket handling ved at holde musemarkøren over HTML-elementet. Den påkalder JavaScript-funktionen for at udføre den angivne handling på hændelsesudløseren. Det kan implementeres med '