Ejemplo de Cómo Llamar Una Función En JavaScript

Inicio » JavaScript » 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.

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:

  1. En la sección <head>, se define la función miFuncion() dentro de un bloque de código <script>. Esta función mostrará una ventana emergente (alert) con un mensaje cuando se llame.

  2. En la sección <body>, se crea un botón con el atributo id="activarFuncion" para poder identificarlo y vincularlo al evento 'click' posteriormente.

  3. Al final del cuerpo del documento, en un nuevo bloque de código <script>, obtenemos el elemento del botón por su ID utilizando document.getElementById("activarFuncion") y lo almacenamos en la variable boton.

  4. 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ón miFuncion() 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.). Ejemplo de Cómo Llamar Una Función En JavaScript.Ejemplo de. Recuperado el 26 de Septiembre de 2023 de https://www.ejemplode.com/24-javascript/524-ejemplo_de_como_llamar_una_funcion_en_javascript.html

Escrito por:
Aziel Pichardo
Ingeniería en Sistemas
Universidad del Estado de Guanajuato
Mauricio del Moral Durán
Mauricio del Moral, fundador y creador de Ejemplo de, es un experto en enseñanza y un apasionado del ámbito educativo desde el año 2007. Ha dedicado una considerable parte de su vida profesional al estudio y al desarrollo de contenidos educativos en formatos digitales de alta calidad. Poseedor de una Licenciatura en Ciencias de la Comunicación, Mauricio es egresado de la prestigiosa Universidad Intercontinental.
Última modificación: 2023-04-15

Deja un comentario


Acepto la política de privacidad.