Un evento es una parte importante de .Una página web responde según un evento ocurrido. Algunos eventos son generados por el usuario y otros son generados por API. En este artículo, veremos cómo ocurren los eventos y cómo se usa el método addEventListener en JavaScript en la siguiente secuencia:
- ¿Qué es Event Listener?
- AddEventListener () en JavaScript
- Valores paramétricos
- AddEventListener en JavaScript: ejemplo
¿Qué es Event Listener?
Un detector de eventos es un procedimiento en JavaScript que espera a que ocurra un evento. El simple ejemplo de un evento es un usuario que hace clic con el mouse o presiona una tecla en el teclado.
los addEventListener () es un incorporado Función de JavaScript que toma el evento para escuchar y un segundo argumento para ser llamado cada vez que se activa el evento descrito. Se puede agregar cualquier número de controladores de eventos a un solo elemento sin sobrescribir los controladores de eventos existentes.
addEventListener () en JavaScript
Algunos de los Características del método de escucha de eventos incluyen:
- los addEventListener () método adjunta un controlador de eventos al elemento especificado.
- Este método adjunta un controlador de eventos a un elemento sin sobrescribir controladores de eventos existentes.
- Puedes añadir muchos controladores de eventos a un elemento.
- Puede agregar muchos controladores de eventos del el mismo tipo a uno elemento , es decir, dos eventos de 'clic'.
- Los oyentes de eventos se pueden agregar a cualquier JUICIO Objeto no solo elementos HTML. es decir, el objeto de la ventana.
- El método addEventListener () lo convierte en Más fácil para controlar como el el evento reacciona a burbujear.
Cuando se utiliza el método addEventListener (), JavaScript se separa del marcado, para una mejor legibilidad y le permite agregar detectores de eventos incluso cuando no controla el marcado HTML.
Además, puede eliminar fácilmente un detector de eventos utilizando el método removeEventListener () .
Sintaxis:
target.addEventListener (tipo, oyente [, opciones]) target.addEventListener (tipo, oyente [, useCapture]) target.addEventListener (tipo, oyente [, useCapture, wantsUntrusted])
Valores paramétricos
| Parámetro | Descripción |
evento | Necesario. Una cadena que especifica el nombre del evento. Nota: No utilice el prefijo 'on'. Por ejemplo, utilice 'clic' en lugar de 'onclick'. Para obtener una lista de todos los eventos DOM de HTML, consulte nuestra Referencia completa de objetos de eventos DOM de HTML. |
función ¿Qué son los filtros de contexto en Tableau? | Necesario. Especifica la función que se ejecutará cuando ocurra el evento. Cuando ocurre el evento, se pasa un objeto de evento a la función como primer parámetro. El tipo de evento objeto depende del evento especificado. Por ejemplo, el evento 'click' pertenece al objeto MouseEvent. |
useCapture | Opcional. Un valor booleano que especifica si el evento debe ejecutarse en la fase de captura o en la fase de propagación. Valores posibles: verdadero: el controlador de eventos se ejecuta en la fase de captura. Falso: predeterminado. El controlador de eventos se ejecuta en la fase de propagación. |
Ahora que sabes cómo funciona un detector de eventos, veamos un ejemplo de addEventListener () en JavaScript.
addEventListener () en JavaScript: Ejemplo
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gt Este ejemplo usa el método addEventListener () para ejecutar una función cuando un usuario hace clic en un botón. & lt / p & gt & ltbutton id = 'myBtn' & gt ('myBtn'). addEventListener ('click', myFunction) function myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt 
Con esto, llegamos al final de este addEventListener en JavaScript. Espero que hayas entendido como el oyente de eventos método funciona en JavaScript.
Mira nuestro que viene con capacitación en vivo dirigida por un instructor y experiencia en proyectos de la vida real. Esta capacitación lo capacita en habilidades para trabajar con tecnologías web de back-end y front-end. Incluye capacitación en desarrollo web, jQuery, Angular, NodeJS, ExpressJS y MongoDB.
Tienes una pregunta para nosotros? Por favor, menciónelo en la sección de comentarios del blog 'addEventListener in JavaScript' y nos comunicaremos con usted.