Un evento es una acción u ocurrencia reconocida por el software. Puede ser activado por el usuario o por el sistema. La mayoría de los eventos se usan en botones, hipervínculos, desplazamientos, carga de páginas, etc. Todo esto entra en acción (procesado) con la ayuda de controladores de eventos.
En este artículo, aprenderá acerca de los diferentes tipos de atributos de controlador de eventos HTML. Básicamente, para manejar eventos en HTML, solo necesita agregar la función en la etiqueta HTML que se ejecutará en JavaScript cuando se active o desencadene cualquier evento en HTML. Hay muchos atributos de eventos en HTML, como eventos de teclado, eventos de mouse, eventos de formulario, etc., que se analizan brevemente.
Sintaxis:
Manejar evento en HTML:
<element onclick="myScript">
Varios atributos de eventos HTML:
Evento de formulario
- onblur: Este evento ocurre cuando un objeto pierde el foco.
<element onblur="myScript">
- onchange: Este evento ocurre cuando el valor de un elemento ha sido cambiado.
<element onchange="myScript">
- onfocus: este evento ocurre cuando el elemento obtiene el foco.
<element onfocus="myScript">
Ejemplo 1: cuando el usuario selecciona el botón de la etiqueta de selección , se activa el evento onchange() y luego se llama a OnChangeFunction() , que está presente en JavaScript. Entonces, un controlador de eventos definido en HTML puede llamar a una función definida en un script
HTML
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<input type="text" name="blur" id="blur"
onblur="BlurFunction()"
placeholder="Enter Name" />
<br /><br />
<select id="course" onchange="OnChangeFunction()">
<option value="Competitive Programming">
Competitive Programming
</option>
<option value="Operating System">
Operating System
</option>
<option value="Web Development">
Web Development
</option>
<option value="Android Development">
Android Development
</option>
</select>
<p id="demo"></p>
<br /><br />
<input type="text" id="focus"
onfocus="FocusFunction(this.id)"
placeholder="Enter Your Semester" /><br />
</center>
<script>
function BlurFunction() {
let x = document.getElementById("blur");
x.value = x.value.toUpperCase();
}
function OnChangeFunction() {
let x = document.getElementById("course").value;
document.getElementById("demo")
.innerHTML = "You selected: " + x;
}
function FocusFunction(x) {
document.getElementById(x)
.style.background = "green";
}
</script>
</body>
</html>
Producción:
desenfoque, enfoque y onchange
Evento
- onclick: este evento ocurre cuando el usuario hace clic en un elemento.
<element onclick="myScript">
- onmouseover: este evento ocurre cuando el usuario pasa el puntero del mouse sobre un elemento.
<element onmouseover="myScript">
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<button onclick="OnClickFunction()">
Click me
</button>
<p id="demo"></p>
<br /><br />
<p onmouseover="MouseHover()">
Hover Mouse Here
</p>
</center>
<script>
function OnClickFunction() {
document.getElementById("demo")
.innerHTML = "GeeksforGeeks";
}
function MouseHover() {
alert("Mouse move over");
}
</script>
</body>
</html>
Producción:
Ratón sobre
En el resultado anterior, el botón ‘ Click Me’ llama a la función OnClickFunction() cuando se hace clic en él. OnClickFunction () es una función definida en un elemento <script> separado.
Desventajas de usar atributos de controlador de eventos HTML:
- La asignación de controladores de eventos mediante atributos de controlador de eventos HTML se considera una mala práctica.
- El código del controlador de eventos se mezcla con el código HTML, lo que hará que el código sea más difícil de mantener y ampliar.
- Hay un problema con el tiempo, ya que si el elemento se carga por completo antes que el código JavaScript, los usuarios pueden comenzar a interactuar con el elemento en la página web, lo que provocará un error.
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA