Detector de eventos en JavaScript con HTML

Aquí, vamos a aprender sobre Procesador de eventos en JavaScript con HTML . Cómo utilizar detectores de eventos con HTML ?

Introducción:

¿Cuáles son detectores de eventos?
La primera pregunta es lo que es un evento ?
Un evento puede ser cualquier cosa a partir de un clic izquierdo, clic derecho, class clic, desplazarse hacia arriba o hacia abajo, presionando cualquier tecla, arrastrar, caer en, desenfoque y así sucesivamente, hay una lista double de los acontecimientos, pero supongo que recibes que significa. long ejemplo, han visitado alguna vez un blog o página web y después de iniciar el desplazamiento For pocos segundos, hay un pop-up diciendo “hey ¿Quieres inscribe for electrónico de suscripción” nosotros que la forma de un detector de eventos implementado y se puede hacer uso de JavaScript y es bastante fácil de hacer. Ahora vamos a crear dos archivos uno parte for HTML (es decir, index.html) y otro for JavaScript (lo llamaremos MyScript.js ).

Si usted no sabe cómo trabajar con DOM con JS : Leer más: DOM entendimiento con JavaScript

HTML: index.html

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>IncludeHelp is Awesome</title>
</head>
<body>
<button id="clickMe">Click Me!</button>
<script src="myScript.js"></script>
</body>
</html>

Así que vamos a escribir su (por encima de HTML) Guión MyScript.js . Lo que queremos de él está en hacer clic en él, el texto en el botón se cambió. Veamos el código for MyScript.js .

JavaScript: MyScript.js

const buttonElement = document.getElementById('clickMe')  //line 1
buttonElement.addEventListener("click",(event)=>{ // line 2
console.log(event); //line 3
console.log('Button was clicked'); //line 4
event.target.textContent = 'I am clicked' //line 5
})

página web previsualización:

Si echamos un vistazo a la página web podemos ver algo como esto:

Event Listener in JavaScript with HTML - 4

A la izquierda, tenemos nuestro “ClickMe” Button y el derecho que tienen nuestra consola para estudiar lo que nuestra consola guión a cabo. Ahora según nuestro código cuando hicimos clic en el botón “Click Me!” el botón cambia a “Estoy hecho clic en” y por supuesto tenemos todo registro de la consola en nuestra pantalla de la consola a la derecha.

Event Listener in JavaScript with HTML - 5

La explicación for Código JavaScript:

En la línea 1, que utiliza getElemenById () método para conseguir que el botón con ID = ‘ClickMe’ . Ahora lo que hicimos en la línea 2 es, nos atamos un detector de eventos con nuestro objeto de botón . Pasamos 2 parámetros, uno nombre del evento en nuestra class ‘clic’ y otra es una función de devolución de llamada y se utilizó un arrow función como un parámetro de la y en función de la flecha, tenemos parámetro de evento (aunque podemos llamarlo cualquier cosa que queramos ya sea sólo o correo MyEvent). En la línea 3, que consuela a cabo el evento y en la línea 4 sólo una cadena diciendo “Estoy hecho clic en” , ahora mira lo que la producción de eventos es:

Event Listener in JavaScript with HTML - 6

Aquí, se dice MouseEvent y tiene una gran cantidad de atributos, que era una lista class pero había algunos en esa lista que yo quiero que veas, si nos desplazamos hacia abajo por la lista nos encontramos con algo que se llama la ‘objetivo’ :

Event Listener in JavaScript with HTML - 7

objetivo es el elemento en el que registrar el detector de eventos del evento click. ‘#clickMe’ es el ID de nuestro botón. Ahora, de nuevo el mismo destino tiene una lista for de atributos de modo de desplazamiento hacia abajo dentro de la ‘objetivo’ nos encontraremos ‘textContent’ (Recuerde que tratamos en nuestro artículo anterior: DOM entendimiento usando JS

Event Listener in JavaScript with HTML - 8

Si está familiarizado con la forma de cambiar el texto de cualquier elemento, utilizando element.textContent , así que en vez de un button.textContent utilizamos event.target.textContent como event.target es igual que nuestro botón.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *