jueves, 28 de agosto de 2014

Tutorial Javascript parte 17 - Eventos onclick, onfocus, onkeypress, ...




En esta parte del tutorial veremos con interactuar con los elementos del DOM html a través de una serie de eventos que proporciona javascript.

Los eventos son cosas que suceden y que pueden ser capturados para realizar una determinada acción, la lista completo de eventos disponibles la puedes ver en el siguiente enlace: DOM events

El código de ejemplo del capítulo ...


<!DOCTYPE HTML>
<html>
<head>

<script>
window.onload = function()
      {
	  
	   var btn_1 = document.getElementById("btn-1");
	   btn_1.onclick = function()
	     {
		  var box_1 = document.getElementById("box-1");
		  box_1.innerHTML = "<mark>Has hecho click sobre el botón</mark>";
		 }
		 
	   var campo = document.getElementById("campo");
	   campo.onfocus = function()
	   {
	    //alert("El campo de texto ha obtenido el foco");
	   }
	   
	   campo.onkeypress = function(e)
	   {
		var tecla = String.fromCharCode(e.charCode);
		var box_2 = document.getElementById("box-2");
		box_2.innerHTML += tecla;
	   }
	  
	  }
	  
	  function agregar_contenido()
	    {
		  var box_1 = document.getElementById("box-1");
		  box_1.innerHTML = "<mark>Has hecho click sobre el botón</mark>";
		}
		
</script>

</head>
<body>

<button id="btn-1" type="button" onmouseover="agregar_contenido()">Agregar contenido al div</button>
<div id="box-1"></div>

<input type="text" id="campo">
<div id="box-2"></div>

</body>
</html>