Tag Archive for atributo

Eventos en Javascript (onclick, onload, onmouseover,onmouseout)

Hola estimados lectores y bienvenidos a este tutorial, los eventos en JavaScript basicamente son una de las propiedades que nos acercan mas a crear páginas web totalmente dinamicas, esto se debe a que cuando hablamos de un evento, quiere decir que al “ocurrir una acción” en nuestro sitio web, nosotros podemos disparar una secuencia de codigo, a esto se le llama evento.

Ejemplos de eventos pueden ser dar click a un boton, poner el mouse sobre un elemento del nuestro sitio, o incluso cargar el que la página web se haya cargado completamente, los siguientes son algunos de los eventos mas comunes en javascript.

El evento onclick:

Se ejecuta cuando damos click a un elemento del DOM en nuestro sitio, no necesariamente este debe ser un boton, puede ser un <div> u otro tag de html. Para incorporarlo en HTML basta con utilizar el atributo “onclick” en un elemento HTML y especificar el codigo o funcion de javascript a ejecutar.

Ej:

<button value="esto es un boton" onclick="mi_funcion()"/>

Los eventos onmouseover y onmouseout:

Al diferencia de “onclick”, este evento se lanza cuando pasamos el mouse(puntero) sobre un elemento del html, para especificar gatillo de este evento en un elemento del DOM debe usarse el atributo “onmouseover”, respectivamente “onmouseout” se dispara cuando el puntero sale del area de un elemento del DOM.

Ej:

<div id="contenedor" onmouseover="alert('entraste en el area del contenedor')" onmouseout="alert('haz salido del area del contenedor')"/>

 

El evento onload:

Este evento se ejecuta cuando el DOM, es decir todos los elementos html del sitio web han sido cargados correctamente en el cliente, se usa mucho para asegurar la ejecución de codigo cuando se es necesario que la página este completamente cargada para la ejecución correcta de nuestros programas en javascript. Lo ideal es colocarlo unicamente en el tag “<body>” de nuestros sitios web.

Ej:

<body onload="mi_funcion()">
<!-- codigo html -->
</body>

 

 

Codigo de practica con eventos onclick, onload, onmouseover, onmouseout

<!DOCTYPE html>
<html>
	<head>
	<script type="text/javascript">
	//EVENTOS EN javascript

	function hacer_click()
	{
		alert("Me haz dado un click");
	}

	function hacer_hover()
	{
		alert("Estas sobre mi!");
	}

	function salir_del_hover()
	{
		alert("Adios!");
	}

	function cargar_pagina()
	{alert("Ya se ha cargado el sitio web");}
	</script>
	</head>

	<body onload="cargar_pagina()">
		<form>
			<input type="button" value="dame click!"  onmouseout="salir_del_hover()" onmouseover="hacer_hover()" onclick="hacer_click()"/>
		</form>
	</body>

</html>

 Video tutorial de eventos en Javascript: