Los eventos en JavaScript son acciones o sucesos que ocurren en el navegador, como hacer clic en un botón, completar un formulario o cargar una página. Los eventos permiten que el código JavaScript responda a las interacciones del usuario y realice acciones específicas en función de estas interacciones.
1. onchange: Este evento se dispara cuando el contenido de un elemento de entrada de formulario, como un campo de texto o un menú desplegable, cambia.
Ejemplo:
<input type="text" id="inputTexto" onchange="mostrarValor()">
<script>
function mostrarValor() {
let texto = document.getElementById("inputTexto").value;
alert("El valor ingresado es: " + texto);
}
</script>
2. onclick: Este evento se dispara cuando un elemento, como un botón o un enlace, es presionado por el usuario.
Ejemplo:
<button onclick="mostrarAlerta()">Presiona aquí</button>
<script>
function mostrarAlerta() {
alert("¡Botón presionado!");
}
</script>
3. onmouseover: Este evento se dispara cuando el cursor del usuario se encuentra sobre un elemento.
Ejemplo:
<div onmouseover="cambiarColor()" id="miDiv">Pasa el cursor por aquí</div>
<script>
function cambiarColor() {
document.getElementById("miDiv").style.backgroundColor = "lightblue";
}
</script>
4. onmouseout: Este evento se dispara cuando el cursor del usuario sale de un elemento.
Ejemplo:
<div onmouseout="restaurarColor()" id="miDiv">Quita el cursor de aquí</div>
<script>
function restaurarColor() {
document.getElementById("miDiv").style.backgroundColor = "";
}
</script>
5. onload: Este evento se dispara cuando un documento o recurso, como una imagen, se ha cargado completamente.
Ejemplo:
<body onload="mostrarMensaje()">
<h1 id="mensaje"></h1>
<script>
function mostrarMensaje() {
document.getElementById("mensaje").innerHTML = "¡Página cargada!";
}
</script>
</body>
6. onsubmit: Este evento se dispara cuando se envía un formulario.
Ejemplo:
<form onsubmit="return validarFormulario()">
<input type="text" id="nombre" placeholder="Nombre">
<button type="submit">Enviar</button>
</form>
<script>
function validarFormulario() {
let nombre = document.getElementById("nombre").value;
if (nombre === "") {
alert("Por favor, ingresa tu nombre");
return false;
}
return true;
}
</script>
Estos son solo algunos ejemplos de eventos en JavaScript. Existen muchos más eventos que pueden utilizarse para interactuar con elementos HTML y responder a las acciones del usuario en tiempo real.
Deja una respuesta