Tutorial HTML : Eventos en HTML

Eventos en HTML

Un evento se produce cuando el usuario se ha producido una determinada acción, como por ejemplo hacer clic en un componente o redimensionar una ventana. Podemos definir varios tipos de eventos en HTML:

Hemos dejado esta sección para el final del curso puesto que en HTML no podemos hacer más que definirlos, ya que para programarlos es necesario usar el lenguaje de programación JavaScript.

A continuación describiremos los atributos usados para asignar eventos en HTML:

* Eventos de <body> y <frameset>:

onload: se produce al cargarse el contenido de la página web.
onunload: se lanza al cargar otro documento o página web.

* Eventos de <form> y sus componentes:

onblur: cuando un elemento pierde el foco.
onchange: al modificar un elemento.
onfocus: cuando un elemento obtiene el foco.
onreset: al resetear un formulario.
onselect: al seleccionar un elemento.
onsubmit: al enviar un formulario.

* Eventos de <img>:

onabort: se produce al interrumpirse la carga de una imagen.

* Eventos de teclado::

onkeydown: cuando se presiona una tecla.
onkeypress: al pulsar una tecla correspondiente a un carácter.
onkeyup: cuando se levanta una tecla tras pulsarla.

* Eventos del ratón:

onclick: al hacer clic en un elemento.
ondblclick: cuando se hace doble clic en un elemento.
onmousedown: al pulsar un botón del ratón.
onmousemove: al mover el ratón dentro del área que ocupa el elemento.
onmouseout: al mover el ratón fuera del área del elemento.
onmouseover: al mover el ratón en el área de un elemento.
onmouseup: cuando se levanta el botón del ratón tras presionarlo.

A continuación te mostramos un ejemplo de cómo se definen eventos en HTML:

<html>

    <head>
        <title>Página WEB de ejemplo: hiperenlaces</title>
		<script language="javaScript">

			function cargar() {
				alert("La página ha sido cargada");
			}

			function pulsar() {
                alert("Has escrito algo");
			}

			function procesar() {
                alert("Haz hecho clic en el botón");
			}

		</script>
    </head>

    <body onload="cargar();">

        <input type="text" id="txt1" name="txt1" onkeypress="pulsar();" />
        <input type="button" id="btn1" name="btn1" value="Púlsame" onclick="procesar();" />

    </body>

</html>

Como hemos visto, podemos asignar eventos a cualquier elemento HTML: ventanas, formularios, botones, etc., aunque <frameset>, <frame> e <iframe> sólo soportan el evento onload().

Para que algunos de ellos funcionen correctamente en Internet Explorer es necesario declarar un <doctype>

Relacionado: [ Eventos en JavaScript ]

Tutorial de HTML

Eventos en HTML