Ejemplos de Cómo Llamar Una Función En JavaScript
Los eventos son acciones que ocurren cuando el usuario interactúa con el navegador, como hacer clic en un botón o cambiar el valor de un campo de entrada. En este artículo, aprenderás a utilizar los 10 eventos más utilizados en JavaScript para llamar a funciones con ejemplos prácticos y completos en HTML.
Al comprender y utilizar estos eventos, podrás crear aplicaciones web más interactivas y dinámicas.
Contenido del artículo
- • 10 ejemplos para llamar funciones con JavaScript
- • Llamar función en el Clic
- • Llamar función en el Doble clic (dblclick)
- • Llamar función en el Mouseover
- • Llamar función en el Mouseout
- • Llamar función en el Mousedown
- • Llamar función en el Mouseup
- • Llamar función en el Change
- • Llamar función en el Submit
- • Llamar función en el Load
- • Llamar función en el Unload
10 ejemplos para llamar funciones con JavaScript
Llamar función en el Clic
El evento click se dispara cuando el usuario hace clic en un elemento. Este evento se puede agregar a cualquier elemento utilizando el atributo onclick.
<html><head><script>function miFuncion() { alert("Haz clic en el botón");}</script></head><body><button onclick="miFuncion()">Haz clic aquí</button></body></html>
Explicación del código:
En la sección
<head>, se define la funciónmiFuncion()dentro de un bloque de código<script>. Esta función mostrará una ventana emergente (alert) con un mensaje cuando se llame.En la sección
<body>, se crea un botón con el atributoid="activarFuncion"para poder identificarlo y vincularlo al evento 'click' posteriormente.Al final del cuerpo del documento, en un nuevo bloque de código
<script>, obtenemos el elemento del botón por su ID utilizandodocument.getElementById("activarFuncion")y lo almacenamos en la variableboton.A continuación, añadimos un 'event listener' al botón utilizando
boton.addEventListener("click", miFuncion). Este 'event listener' escuchará el evento 'click' y llamará a la funciónmiFuncion()cada vez que el botón sea presionado.
Al presionar el botón, se activará el evento 'click' y se llamará a la función miFuncion(), mostrando una ventana emergente con el mensaje "Activaste la función miFuncion()".
Llamar función en el Doble clic (dblclick)
El evento dblclick se dispara cuando el usuario hace doble clic en un elemento. Este evento se puede agregar a cualquier elemento utilizando el atributo ondblclick.
<html><head><script>function miFuncion() { alert("Haz doble clic en el botón");}</script></head><body><button ondblclick="miFuncion()">Haz doble clic aquí</button></body></html>
Llamar función en el Mouseover
El evento mouseover se dispara cuando el puntero del mouse se coloca sobre un elemento. Este evento se puede agregar a cualquier elemento utilizando el atributo onmouseover.
<html><head><script>function miFuncion() { alert("El mouse está sobre el div");}</script></head><body><div onmouseover="miFuncion()">Pasa el mouse por encima</div></body></html>
Llamar función en el Mouseout
El evento mouseout se dispara cuando el puntero del mouse sale de un elemento. Este evento se puede agregar a cualquier elemento utilizando el atributo onmouseout.
<html><head><script>function miFuncion() { alert("El mouse ha salido del div");}</script></head><body><div onmouseout="miFuncion()">Pasa el mouse fuera del elemento</div></body></html>
Llamar función en el Mousedown
El evento mousedown se dispara cuando se presiona el botón del mouse en un elemento. Este evento se puede agregar a cualquier elemento utilizando el atributo onmousedown.
<html><head><script>function miFuncion() { alert("Presiona el botón del mouse");}</script></head><body><button onmousedown="miFuncion()">Presiona el botón del mouse</button></body></html>
Llamar función en el Mouseup
El evento mouseup se dispara cuando se suelta el botón del mouse en un elemento. Este evento se puede agregar a cualquier elemento utilizando el atributo onmouseup.
<html><head><script>function miFuncion() { alert("Suelta el botón del mouse");}</script></head><body><button onmouseup="miFuncion()">Suelta el botón del mouse</button></body></html>
Llamar función en el Change
El evento change se dispara cuando cambia el valor de un elemento de entrada, como un campo de texto o un menú desplegable. Este evento se puede agregar a cualquier elemento de entrada utilizando el atributo onchange.
<html><head><script>function miFuncion() { alert("El valor del campo de texto ha cambiado");}</script></head><body><input type="text" onchange="miFuncion()"></body></html>
Llamar función en el Submit
El evento submit se dispara cuando se envía un formulario. Este evento se puede agregar a un elemento de formulario utilizando el atributo onsubmit.
<html><head><script>function miFuncion() { alert("Formulario enviado"); return false; // Evitar que el formulario se envíe realmente}</script></head><body><form onsubmit="return miFuncion()"> <input type="submit" value="Enviar"></form></body></html>
Llamar función en el Load
El evento load se dispara cuando se carga un elemento, como una imagen o un documento. Este evento se puede agregar a un elemento utilizando el atributo onload.
<html><head><script>function miFuncion() { alert("Imagen cargada");}</script></head><body><img src="imagen.jpg" onload="miFuncion()"></body></html>
Llamar función en el Unload
El evento unload se dispara cuando se cierra una ventana o se navega fuera de la página. Este evento se puede agregar a un elemento body utilizando el atributo onunload.
<html><head><script>function miFuncion() { alert("La ventana se está cerrando");}</script></head><body onunload="miFuncion()"></body></html>
Estos son los 10 eventos más utilizados en JavaScript para llamar a funciones. Con estos ejemplos prácticos, podrás implementar fácilmente estas funciones en tus proyectos web.
¿Cómo citar? Pichardo, A. & Del Moral, M. (s.f.). Ejemplos de Cómo Llamar Una Función En JavaScript.Ejemplo de. Recuperado el 13 de Junio de 2024 de https://www.ejemplode.com/24-javascript/524-ejemplo_de_como_llamar_una_funcion_en_javascript.html