Sintaxis
elemento. el ratón por encima = función ( ) { miScript } ;
En la sintaxis anterior:
- elemento: Especifica el elemento HTML particular, como '
', '
', '
', etc.
- función(): Representa la función definida que se invocará en el desencadenante del evento.
- miScript: Se refiere a la definición de la función para realizar la tarea específica cuando ocurre el evento 'sobre el mouse'.
Sintaxis (con el método 'addEventListener ()')
elemento. agregarEventListener ( 'ratón sobre' , miScript ) ;
En la sintaxis anterior, el ' agregarEventListner() El método ” adjunta el “ el ratón por encima ” evento para la ejecución de la función de JavaScript para realizar algunas tareas.
Ejemplo 1: aplicación del evento 'onmouseover' para mostrar el cuadro de alerta según la sintaxis básica
En este escenario, un “ el ratón por encima ” evento se puede asociar con “ ”, es decir, elemento HTML de párrafo para mostrar el cuadro de alerta con el mensaje proporcionado al desencadenar el evento.
código HTML
Primero, eche un vistazo al siguiente código HTML:
< alineación h2 = 'centro' > Mostrar alerta Caja Usando 'el ratón por encima' Evento h2 >< pasar el mouse sobre = 'muestra()' > pasar el cursor sobre este párrafo para que aparezca un cuadro de alerta. pag >
En el código anterior:
- Primero, agregue un subtítulo de nivel 2 a través del ' ” y establezca su alineación en “centro”.
- A continuación, incluya un párrafo que tenga asociado un “ el ratón por encima ” evento que redirige a la función denominada “ muestra() ” que se activará al pasar el mouse sobre este párrafo.
Código JavaScript
Ahora, revise el código JavaScript proporcionado a continuación:
< guion >ejemplo de función ( ) {
alerta ( 'evento onmouseover desencadenado' ) ;
}
guion >
En el fragmento de código anterior, la función ' muestra() ” se declara para mostrar el “ alerta ” cuadro con el mensaje indicado cuando se activa el evento “onmouseover”.
Producción
Esta salida indica que cuando el mouse se desplaza sobre el párrafo, aparece el cuadro de 'alerta' que muestra el mensaje indicado.
Ejemplo 2: Aplicar el evento 'onmouseover' para cambiar el color de fondo según la sintaxis del método 'addEventListener()'
Este ejemplo aplica el evento “onmouseover” con el método “addEventListener()” para cambiar el párrafo “ color de fondo ” en el desencadenante del evento.
código HTML
El código HTML se proporciona a continuación:
< alineación h2 = 'centro' > Cambiar el fondo Color Usando 'el ratón por encima' Evento h2 >< identificación p = 'prueba' > pasar el cursor sobre este párrafo para cambiar su color de fondo. pag >
En las líneas de código anteriores:
- Así mismo, el “ El elemento ” crea un subtítulo de nivel 2 alineado en “ centro ”.
- Después de eso, el “ El elemento ” representa el párrafo que tiene un id “prueba”.
Código JavaScript
Ahora, proceda con el siguiente código JavaScript:
< guion >documento. getElementById ( 'prueba' ) . agregarEventListener ( 'ratón sobre' , demostración ) ;
demostración de función ( ) {
documento. getElementById ( 'prueba' ) . estilo . fondo = 'rosa' ;
}
guion >
En el bloque de código anterior:
- El ' getElementById() El método ” se aplica combinado con el “ agregarEventListener() ” para obtener el párrafo a través de su id asociado “test”, y asociar el evento “mouseover” con la función indicada como su argumento.
- Ahora, defina la función “ mifunc() ”.
- En la definición de la función, el “ documento.getElementById() El método ” utiliza el “ estilo.fondo ” para cambiar el color de fondo del párrafo cuando se activa el evento.
Producción
Como se ve, el “ color de fondo ” del párrafo se ha cambiado en el evento desencadenado, es decir, “pasar el mouse”.
Conclusión
JavaScript ofrece el integrado ' el ratón por encima ” evento que desencadena una acción deseada al pasar el puntero del mouse sobre el elemento HTML. Invoca la función de JavaScript para realizar la acción especificada en el desencadenador del evento. Se puede implementar con el “ ”, “