Manejadores como atributos de los elementos XHTML.
Se trata del método más sencillo y a la vez menos profesional de indicar el código JavaScript que se debe ejecutar cuando se produzca un evento. En este caso, el código se incluye en un atributo del propio elemento XHTML. En el siguiente ejemplo, se quiere mostrar un mensaje cuando el usuario haga click con el mouse sobre un botón:
<input type="button" value="click y verás" onclick="alert('Gracias por hacer click');" />
En este método, se definen atributos XHTML con el mismo nombre que los eventos que se quieren manejar. El ejemplo anterior sólo quiere controlar el evento de hacer click con el ratón, cuyo nombre es
onclick. Así, el elemento XHTML para el que se quiere definir este evento, debe incluir un atributo llamado onclick.
El contenido del atributo es una cadena de texto que contiene todas las instrucciones JavaScript que se ejecutan cuando se produce el evento. En este caso, el código JavaScript es muy sencillo (
alert('Gracias por hacer click');), ya que solamente se trata de mostrar un mensaje.
En este otro ejemplo, cuando el usuario hace click sobre el elemento
<div> se muestra un mensaje y cuando el usuario pasa el mouse por encima del elemento, se muestra otro mensaje:<div onclick="alert('Has hecho click con el mouse');" onmouseover="alert('Acabas de pasar el mouse por encima');"> Puedes hacer click sobre este elemento o simplemente pasar el mouse por encima </div>
Este otro ejemplo incluye una de las instrucciones más utilizadas en las aplicaciones JavaScript más antiguas:
<body onload="alert('La página se ha cargado completamente');"> ... </body>
El mensaje anterior se muestra después de que la página se haya cargado completamente, es decir, después de que se haya descargado su código HTML, sus imágenes y cualquier otro objeto incluido en la página.
El evento
onload es uno de los más utilizados ya que las funciones que permiten acceder y manipular los nodos del árbol DOM solamente están disponibles cuando la página se ha cargado completamente.
No hay comentarios.:
Publicar un comentario