Conceptos de DHTML

El evento change se dispara para los controles select, textarea e input de tipo text.

Para el control input se dispara cuando ha cambiado su contenido y pierde el foco, en cambio para el control select cada vez que cambiamos el item seleccionado se dispara el evento.

Confeccionaremos una página que contenga dos text y un select, mostraremos en una ventana alert el objeto que emite el evento change:

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>
    <form action="#">
        <p>Nombre:<input type="text" id="nombre" name="nombre"></p>
        <p>Apellido:<input type="text" id="apellido" name="apellido"></p>
        <p>Cantidad de hijos:<select id="hijos">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        </select></p>
        <p><input type="submit" value="confirmar"></p>
    </form>
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

document.getElementById('nombre').addEventListener('change', modificarControl)
document.getElementById('apellido').addEventListener('change', modificarControl)
document.getElementById('hijos').addEventListener('change', modificarControl)

function modificarControl(e) {
    let ob = e.target
    alert('Se modificó el control:' + ob.getAttribute('id'))
}

Podemos decir que enlazamos los tres controles con la misma función "modificarControl", en esta obtenemos la referencia del objeto que emitió el evento:

function modificarControl(e) {
    let ob = e.target
    alert('Se modificó el control:' + ob.getAttribute('id'))
}

Y luego mediante el método getAttribute obtenemos el valor del id.

45 - Evento change (DOM)

Retornar