 |
Evento click (DOM)
HTMLElementObject.click()
Disponemos dos botones y luego mostramos en un alert la etiqueta del mismo.
Con este simple ejemplo aprenderemos muchos puntos que deberemos tener en cuenta de ahora en más.
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<script >
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos(e)
{
var boton1=document.getElementById('b1');
boton1.addEventListener('click',presionBoton1,false);
var boton2=document.getElementById('b2');
boton2.addEventListener('click',presionBoton2,false);
}
function presionBoton1(e)
{
var boton1=document.getElementById('b1');
alert(boton1.getAttribute('value'));
}
function presionBoton2(e)
{
var boton2=document.getElementById('b2');
alert(boton2.getAttribute('value'));
}
</script>
</head>
<body>
<input type="button" value="Botón 1" id="b1"><br>
<input type="button" value="Botón 2" id="b2">
</body>
</html>
El código javascript es:
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos(e)
{
var boton1=document.getElementById('b1');
boton1.addEventListener('click',presionBoton1,false);
var boton2=document.getElementById('b2');
boton2.addEventListener('click',presionBoton2,false);
}
function presionBoton1(e)
{
var boton1=document.getElementById('b1');
alert(boton1.getAttribute('value'));
}
function presionBoton2(e)
{
var boton2=document.getElementById('b2');
alert(boton2.getAttribute('value'));
}
Lo primero que podemos observar que nuestro archivo HTML está libre de JavaScript (de todos modos no debemos olvidarnos de disponer la marca script para importar el archivo js)
La primer línea de nuestro archivo JavaScript:
window.addEventListener('load',inicializarEventos,false);
Fijamos para el objeto window el evento load indicándole que cuando finalice de cargar toda la página llame a la función inicializarEventos.
La registración de los eventos para cada botón lo hacemos en la función inicializarEventos (esto no es un capricho sino esto se debe que el navegador debe cargar toda la página en memoria para que se cree el árbol de elementos, de no hacerlo de esta manera el método getElementById no retornará la referencia del botón ya que no está creado)
La función inicializarEventos es:
function inicializarEventos(e)
{
var boton1=document.getElementById('b1');
boton1.addEventListener('click',presionBoton1,false);
var boton2=document.getElementById('b2');
boton2.addEventListener('click',presionBoton2,false);
}
Obtenemos la referencia al primer botón y nuevamente mediante el método addEventListener registramos el evento click y la función a ejecutarse cuando sea presionado. Este proceso lo hacemos para los dos botones.
Las otras dos funciones:
function presionBoton1(e)
{
var boton1=document.getElementById('b1');
alert(boton1.getAttribute('value'));
}
function presionBoton2(e)
{
var boton2=document.getElementById('b2');
alert(boton2.getAttribute('value'));
}
Solo tienen el objetivo de obtener inicialmente la referencia del botón respectivo y llamar al método getAttribute solicitando el atributo value.
Otro Ejemplo
Simule un clic del mouse al mover el puntero del mouse sobre una casilla de verificación:
<!DOCTYPE html>
<html>
<body>
<p>Pase el cursor sobre la casilla de verificación para simular un clic del mouse.</p>
<form>
<input type="checkbox" id="myCheck" onmouseover="myFunction()" onclick="alert('Evento click ha ocurrido')">
</form>
<script>
function myFunction() {
document.getElementById("myCheck").click();
}
</script>
</body>
</html>