 |
Evento change (DOM)
Evento change (DOM)
El evento change se dispara para los controles select, textarea e input de tipo text.
Cuando estamos perdiendo el foco del control input o select si el contenido a cambiado se dispara el evento change, en cambio para el control select se dispara cada vez que seleccionamos un nuevo item.
Confeccionaremos una página que contenga dos text y un select, mostraremos en una ventana alert el objeto que emite el evento change:
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos()
{
var ob=document.getElementById('nombre');
ob.addEventListener('change',modificarControl,false);
ob=document.getElementById('apellido');
ob.addEventListener('change',modificarControl,false);
ob=document.getElementById('hijos');
ob.addEventListener('change',modificarControl,false);
}
function modificarControl(e)
{
var ob;
ob=e.target;
alert('Se modificó el control:'+ob.getAttribute('id'));
}
</script>
</head>
<body>
<form action="#">
Nombre:<input type="text" id="nombre" name="nombre"><br>
Apellido:<input type="text" id="apellido" name="apellido"><br>
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>
<br>
<input type="submit" value="confirmar">
</form>
</body>
</html>
El código javascript es:
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos()
{
var ob=document.getElementById('nombre');
ob.addEventListener('change',modificarControl,false);
ob=document.getElementById('apellido');
ob.addEventListener('change',modificarControl,false);
ob=document.getElementById('hijos');
ob.addEventListener('change',modificarControl,false);
}
function modificarControl(e)
{
var ob;
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:
var ob; ob=e.target;
Y luego mediante el método getAttribute obtenemos el valor del id:
alert('Se modificó el control:'+ob.getAttribute('id'));