Javascript tiene eventos para proporcionar una interfaz dinámica a una página web. Estos eventos están vinculados a elementos en el modelo de objetos de documento (DOM).
Hay tres formas de asignar un controlador de eventos:
- Atributo del controlador de eventos HTML
- Propiedad HTML DOM
- Método HTML DOM addEventListener()
La mejor forma de agregar un evento en un script de JavaScript es addEventListener() . Vamos a sumergirnos en algunos ejemplos para entender.
Ejemplo 1: En este ejemplo, agregaremos un evento utilizando atributos de controlador de eventos.
Sintaxis:
<element onclick = "script">
El atributo de evento onclick funciona cuando el usuario hace clic en el botón. Cuando el mouse hace clic en el elemento, se ejecuta el script.
HTML
<!doctype html>
<html>
<head>
<script>
function Geeks() {
alert('Hi there!');
}
</script>
</head>
<body>
<button type="button"
onclick="Geeks()">
Click me event
</button>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Desventaja:
- La asignación de controladores de eventos utilizando 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.
Ejemplo 2: En este ejemplo, agregaremos un evento utilizando la propiedad HTML DOM.
Sintaxis:
element.onclick = function() {}
HTML
<!doctype html>
<html>
<body>
<button id="button">Click me event</button>
<script>
let btn = document.getElementById("button");
btn.onclick = function() {
alert('Hi there');
};
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Desventaja: no podemos asignar más de un controlador de eventos para un evento en particular.
Ejemplo 3: En este ejemplo, agregaremos un evento utilizando el método addEventListener(). El método addEventListener() toma el evento para escuchar y un segundo argumento para llamar cada vez que se activa el evento descrito. Se puede agregar cualquier cantidad de controladores de eventos a un solo elemento sin sobrescribir los controladores de eventos existentes.
Sintaxis:
element.addEventListener(event, listener);
HTML
<!doctype html>
<html>
<body>
<button id="button">Click me event</button>
<script>
let btn = document.getElementById("button");
btn.addEventListener('click', function() {
alert('Hi there');
});
btn.addEventListener('click', function() {
alert('Welcome To GeeksforGeeks');
});
</script>
</body>
</html>
Producción:
Ventaja: podemos asignar más de un controlador de eventos para un evento en particular.
Conclusión: ahora puede concluir que addEventListener() es la mejor manera de agregar un evento en el script de JavaScript debido a su controlador de eventos múltiples para un evento en particular.
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA