[Javascript] Manejo de Eventos en botones

 in Web Development  tagged javascript by

Los eventos en Javascript nos ayudan a obtener un mejor control de nuestra aplicacion web, asi como hacer que nuestra app reaccione a las peticiones del usuario.

Aunque los eventos Javascript estan disponibles para cualquier elemento del DOM, en este articulo nos enfocaremos al Manejo de Eventos en botones.

Hay varias formas de definir un boton:

[code language=”html”]

<button id="mybutton">Mi Boton</button>

<input type="button" id="mybutton" value="Mi Boton"/>

[/code]

Con cualquiera de esos ejemplos dibujaremos un boton en nuestra aplicacion web.

Los eventos son resultado de la interaccion del usuario, por ejemplo cuando el usuario hace click en el boton se llama el evento click, cuando el usuario pasa el mouse sobre el boton se llama el evento “mouseover”, cuando el usuario pasa el mouse fuera del boton se llama al evento “mouseleave”, cuando el usuario selecciona el boton con la tecla Tab se llama “focus” y cuando se quita el “focus” se llama “blur”.

Existen muchos eventos pero estos 5 eventos son basicamente los que podemos usar mas seguido en un boton, aunque el mas comun siempre sera el evento click.

Codigo de Ejemplo

Para hacer mas claro el tema que trato de explicar les dejo el siguiente codigo de ejemplo


<!DOCTYPE html>
<!– Powered by Evilnapsis (http://evilnapsis.com/) –>
<html>
<head>
<title>Ejemplo de Eventos Javascript en Botones</title>
</head>
<body>
<h1>Ejemplo de Eventos en Botones</h1>
<button id="mybutton">Mi Boton</button>
<p id="mymarker"></p>
<script>
var button = document.getElementById("mybutton");
var marker = document.getElementById("mymarker");
var click=0, mouseover=0, mouseleave=0, focus=0, blur=0;
button.onclick = function(){
console.log(this.id+": Clicked!");
click++;
update_marker();
}
button.onmouseover = function(){
console.log(this.id+": Mouse Over!");
mouseover++;
update_marker();
}
button.onmouseleave = function(){
console.log(this.id+": Mouse Leave!");
mouseleave++;
update_marker();
}
button.onfocus = function(){
console.log(this.id+": Focus!");
focus++;
update_marker();
}
button.onblur = function(){
console.log(this.id+": Blur!");
blur++;
update_marker();
}
function update_marker(){
marker.innerHTML = "Click: "+ click + " – ";
marker.innerHTML += "Mouseover: "+ mouseover + " – ";
marker.innerHTML += "Mouseleave: "+ mouseleave + " – ";
marker.innerHTML += "Focus: "+ focus + " – ";
marker.innerHTML += "Blur: "+ blur ;
}
</script>
</body>
</html>

view raw

buttons-js.html

hosted with ❤ by GitHub

  • Linea 9: Definicion del boton
  • Linea 10: Definicion de un parrafo para mostrar valores
  • Lineas 12-14: Definicion de variables y elementos.
  • Lineas 16-20: Evento Click
  • Lineas 22-26: Evento Mouse over
  • Lineas 28-32: Evento Mouse leave
  • Lineas 34-38: Evento Focus
  • Lineas 40-44: Evento Blur
  • Lineas 46-52: Funcion update_marker

Explicacion Basica

Podemos ver que el codigo para controlar los eventos es igual o muy parecido, pero en la practica podemos usar codigos diferentes para manejar cualquier evento sin problema.

Por ejemplo:

[code language=”javascript”]

button.onclick = function(){
console.log(this.id+": Clicked!");
click++;
update_marker();
}

[/code]

En este caso el evento “click” lo manejo usando una funcion anonima y el metodo “onclick”, seguido de una impresion en la consola, un incrementador y una llamada a la funcion update_marker que muestra el marcador.

Leave a comment

One thought on “[Javascript] Manejo de Eventos en botones”