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