Conceptos de DHTML

Recordemos que el evento mouseover se dispara cuando ingresamos la flecha del mouse a un elemento HTML y el mouseout cuando sacamos la flecha del control.

Para probar estos dos eventos utilizando la especificación del DOM implementaremos una página que contenga tres botones y cuando ingrese la flecha del mouse al botón cambiaremos el color de texto del mismo, retornando al color original cuando retiramos la flecha del control.

pagina.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <input type="button" name="boton1" value="boton 1">
    <input type="button" name="boton2" value="boton 2">
    <input type="button" name="boton3" value="boton 3">
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

let vec = document.getElementsByTagName('input')
for (let f = 0; f < vec.length; f++) {
    vec[f].addEventListener('mouseover', entrar)
    vec[f].addEventListener('mouseout', salir)
}

function entrar(e) {
    e.target.style.color = '#f00'
}

function salir(e) {
    e.target.style.color = '#000'
}

Veamos algunas cosas interesantes en este problema. Primero podemos observar que no definimos un id para cada botón sino por medio de la función getElementsByTagName que nos proporciona el DOM obtenemos un vector con la referencia a todos los objetos de tipo input contenidos en la página.

Luego dentro de un for llamamos al método addEventListener inicializando los eventos mouseover y mouseout:

let vec = document.getElementsByTagName('input')
for (let f = 0; f < vec.length; f++) {
    vec[f].addEventListener('mouseover', entrar)
    vec[f].addEventListener('mouseout', salir)
}

Finalmente implementamos las dos funciones que modifican el color de los botones:

function entrar(e) {
    e.target.style.color = '#f00'
}

function salir(e) {
    e.target.style.color = '#000'
}

39 - Eventos mouseover, mouseout (DOM)

Retornar