Sintaxi
element. sobre el ratolí = funció ( ) { myScript } ;
En la sintaxi anterior:
- element: Especifica l'element HTML particular com ara '
', '
', '
', etc.
- funció(): Representa la funció definida que s'invocarà al disparar l'esdeveniment.
- myScript: Es refereix a la definició de la funció per realitzar la tasca específica quan es produeix l'esdeveniment 'onmouseover'.
Sintaxi (amb el mètode 'addEventListener()')
element. addEventListener ( 'ratolí sobre' , myScript ) ;
En la sintaxi anterior, el ' addEventListner() ” mètode adjunta el “ sobre el ratolí ” esdeveniment per a l'execució de la funció JavaScript per realitzar algunes tasques.
Exemple 1: aplicació de l'esdeveniment 'onmouseover' per mostrar el quadre d'alerta basat en la sintaxi bàsica
En aquest escenari, un ' sobre el ratolí 'L'esdeveniment es pot associar amb ' ”, és a dir, un element HTML de paràgraf per mostrar el quadre d'alerta amb el missatge proporcionat quan s'activa l'esdeveniment.
Codi HTML
Primer, mireu el següent codi HTML:
< alinear h2 = 'centre' > Mostra alerta Caixa Utilitzant 'passant el ratolí' Esdeveniment h2 >< p sobre el ratolí = 'mostra()' > Passa el cursor això paràgraf per obrir un quadre d'alerta. pàg >
En el codi anterior:
- En primer lloc, afegiu un subtítol del nivell 2 mitjançant el ' ” i establiu la seva alineació a “centre”.
- A continuació, inclou un paràgraf amb un associat ' sobre el ratolí ” esdeveniment que redirigeix a la funció anomenada “ mostra () ” que s'activarà en passar el ratolí en aquest paràgraf.
Codi JavaScript
Ara, visualitzeu el codi JavaScript proporcionat a continuació:
< guió >mostra de funció ( ) {
alerta ( 'S'ha activat l'esdeveniment onmouseover' ) ;
}
guió >
Al fragment de codi anterior, la funció “ mostra () ” es declara per mostrar el “ alerta ” amb el missatge indicat quan es desencadena l'esdeveniment “onmouseover”.
Sortida
Aquesta sortida indica que quan el ratolí passa per sobre del paràgraf, apareix el quadre 'alerta' que mostra el missatge indicat.
Exemple 2: aplicació de l'esdeveniment 'onmouseover' per canviar el color de fons segons la sintaxi del mètode 'addEventListener()'
Aquest exemple aplica l'esdeveniment 'onmouseover' amb el mètode 'addEventListener()' per canviar el paràgraf ' color de fons ” en el desencadenant de l'esdeveniment.
Codi HTML
El codi HTML es mostra a continuació:
< alinear h2 = 'centre' > Canvia el fons Color Utilitzant 'passant el ratolí' Esdeveniment h2 >< p id = 'prova' > Passa el cursor això paràgraf per canviar-ne el color de fons. pàg >
A les línies de codi anteriors:
- Així mateix, el “ L'element ' crea un subtítol de nivell 2 alineat a ' centre ”.
- Després d'això, el ' 'l'element representa el paràgraf amb un id 'prova'.
Codi JavaScript
Ara, procediu al codi JavaScript següent:
< guió >document. getElementById ( 'prova' ) . addEventListener ( 'ratolí sobre' , demostració ) ;
demostració de funcions ( ) {
document. getElementById ( 'prova' ) . estil . fons = 'rosa' ;
}
guió >
Al bloc de codi anterior:
- El ' getElementById() S'aplica el mètode combinat amb el mètode addEventListener() ” per obtenir el paràgraf mitjançant el seu identificador associat “prova” i associar l'esdeveniment “mouseover” amb la funció indicada com a argument.
- Ara, definiu la funció ' la meva funció() ”.
- A la definició de la funció, el ' document.getElementById() ' El mètode utilitza el ' estil.fons ” per canviar el color de fons del paràgraf quan s'activa l'esdeveniment.
Sortida
Com es veu, el ' color de fons ' del paràgraf s'ha canviat en l'esdeveniment activat, és a dir, 'passar el ratolí'.
Conclusió
JavaScript ofereix el ' sobre el ratolí ” esdeveniment que desencadena l'acció desitjada en passar el punter del ratolí a l'element HTML. Invoca la funció JavaScript per dur a terme l'acció especificada en el desencadenant de l'esdeveniment. Es pot implementar amb el '