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:

Acerca del autor:

Mi nombre es Jorge Villalobos, soy Colombiano de nacimiento y resido en México desde 2005,actualmente soy el creador de codigoprogramacion.com Soy ingeniero en tecnologías de información y comunicaciones y trabajo de tiempo completo desarrollando aplicaciones web. En general me considero un tipo normal, me gusta salir, divertirme, y uno de mis hobbies es programar y hacer tutoriales para compartir conocimiento, me gusta la pizza, el ajedrez y tomar una que otra cerveza los fines de semana. Espero que este proyecto ayude a ayudar a los demás.

Twitter del autor:

23 comments

  1. Toño says:

    A hueso colorado

    • octavio says:

      hola amigos, yo no se mucho de programacion, o mas bien, nada, tengo en mente un juego que yo me hice, cuando era niño… el cual consistía en enfrentar 18 “equipos” de la liga mexicana enfrentaba a todos contra todos… Retomaba el calendario oficial y generaba una tabla de posibles resultados aleatorios:
      El partido era
      (local)America vs Chivas (visitante)

      Resultados de dados:
      2=G 2-1
      3=E 1-1
      4=P 1-3

      Yo sumaba los resultados y otrogaba un valor, si el equipo ganaba, obtenia 3 pts, si empetaba 1 pt, y si perdia 0 pts. lo sumaba y tabulizaba todo (una tabla general) me divertia, entonces me guatria saber si pueden ayudarme donde puedo encontrar una pagina que me ayude a hacer eso!!! se los agradecere!

  2. dM says:

    Buena explicación, saludos.

  3. Osky says:

    Buenas tardes, te hago una consulta necesito saber si existe una función de evento “al hacer click con el raton” o al presionar cerrar “close” sobre la siguiente alerta, ejemplo:
    if((username == “”) || (password == “”)) {
    $(“#message”).html

    ×
    Warning ! Dont submit this.

    Y una vez habiendo presionado sobre cerrar “CLOSE” me haga un foco en “username”.
    Gracias!

  4. alejandro says:

    holaaa, muy bueno el aporte, pero me gustaria saber si se puede en vez de que aparezca una alerta diciendo que hemos dado un clic, si se podria hacer que ese boton, o en este caso el menu cambiara a otro color, como se podria hacer?

  5. edd jesus says:

    Hola, dime existe un codigo java scrip que me permita silumar un copiado de una seleccion, es decir un “ctrl + v “, pero en javascript

  6. Peter says:

    En serio, cada dia hacen peor los tutoriales. Yo quiero codigo javascript, NO HTML. Es MUY facil el html, yo SOLO quiero javascript SIN HTML. Por que todos los tutoriales incluido en el W3School lo poneis con HTML? En todas las FPs estan obligando a usar SOLO javascript por un lado Y HTML por el otro. Por tanto todo esto es INUTIL.

    • Tu padre says:

      En google vas a encontrar lo que pedís, inútil.

    • diego says:

      lo que tu quieres es que se jale el archivo java script desde otro archivo como por ejemplo holamundo.js, pues todos estos tutoriales te sirven wey!!! lo unico es que la parte de javascript la pasas a un archivo .js y lo mandas llamar desde tu html y haci tienes tus dos archivos separados el .html y el .js

      • Tu madre says:

        OK OK lo mando a llamar!! pero para nosotros los novatos mandarlo a llamar no significa mas que mandarlo a llamar!!

        quiere decir que no se NPT de como llamarlo hijoooo

        • jesus says:

          Que te pongan el javascript incrustado en el html es una forma de dartelo sencillo para que lo puedas ver de un vistazo, llamar inutil a alguien por hacer eso es dejar ver que el inutil eres tu, si no tienes ni puta idea, al menos se modesto y no insultes.

        • Alejandro says:

          se refiere a que el archivo js lo cargas al html con

  7. javi says:

    la consulta anterior es para Jorge, perdón, le di a responder sin querer.
    saludos

  8. Edna says:

    ¡Estupendo!; aunque no es lo que buscaba, ha sido de gran utilidad.

  9. Erwin says:

    Hola jorge..!!! gracias por comprartir estos pequeños tutoriales con nosotros, estoy comenzando a entrar a este mundo de la programaciòn, màs estoy en lo que es php, pero en javascript estou Null xD, pero espero ir aprendiendo poco a poco con esto, gracias y suerte en todo.

  10. Saludos Jorge muchas gracias por tus videos, disculpa tengo la necesidad de implementar algun codigo de java para que de alguna manera me active todos los onclick de mi pagina en on o true o enable o algo parecido para que se activen solos automaticamente, es decir lograr que funionen como un onload, esto es posible? gracias

  11. Juan says:

    Muchas gracias Jorge, muy ilustrativo tu video. Te comento que soy un principiante en estas lides, pero me gusta y quiero hacer de ello una profesion. MI consulta es la siguiente: siguiendo tu ejemplo, como hago para ver un video propio o ajeno. Muchas gracias por tu ayuda y un saludo muy afectuoso desde Bolivia,

    • javi says:

      Buenas

      Quería hacerte una consulta. En vez de hacerlo en el mismo archivo, a mi me gusta tener el código de javascript en un archivo externo, pues bien, te comento.

      Como hago eso pero en un archivo externo? No me funciona. Desde el archivo externo, puedo acceder a cualquier objeto con el DOM, cambiar colores, tamaños y demás, pero no me funciona a la hora de recoger una función tipo “onFocus=hacer_click()”, creo que tengo algún problema al recibirla en el archivo de javascript, puesto que si accedo de otra manera, por ejemplo escribiendo en ese archivo externo “document.getElementById(“botón_enviar”).onclick=hacer_click()” si que me funciona.

      Gracias

Leave a Reply to javi Cancel reply

Your email address will not be published. Required fields are marked *