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>
No hay comentarios:
Publicar un comentario