logo

TechCodeview

JavaScript addEventListener()

El agregarEventListener() El método se utiliza para adjuntar un controlador de eventos a un elemento en particular. No anula los controladores de eventos existentes. Se dice que los eventos son una parte esencial de JavaScript. Una página web responde según el evento ocurrido. Los eventos pueden ser generados por el usuario o por API. Un detector de eventos es un procedimiento de JavaScript que espera que ocurra un evento.

El método addEventListener() es una función incorporada de javascript . Podemos agregar múltiples controladores de eventos a un elemento particular sin sobrescribir los controladores de eventos existentes.

Sintaxis

 element.addEventListener(event, function, useCapture);

Aunque tiene tres parámetros, los parámetros evento y función son ampliamente utilizados. El tercer parámetro es opcional de definir. Los valores de esta función se definen de la siguiente manera.

Valores paramétricos

evento: Es un parámetro requerido. Se puede definir como una cadena que especifica el nombre del evento.

Nota: No utilice ningún prefijo como 'on' con el valor del parámetro. Por ejemplo, utilice 'hacer clic' en lugar de 'al hacer clic'.

función: También es un parámetro obligatorio. Es un Función JavaScript que responde al evento ocurrido.

10 millones

utilizarCaptura: Es un parámetro opcional. Es un valor de tipo booleano que especifica si el evento se ejecuta en la fase de propagación o captura. Sus valores posibles son verdadero y FALSO . Cuando se establece en verdadero, el controlador de eventos se ejecuta en la fase de captura. Cuando se establece en falso, el controlador se ejecuta en la fase de burbujeo. Su valor predeterminado es FALSO .

Veamos algunas de las ilustraciones del uso del método addEventListener().

Ejemplo

Es un ejemplo sencillo del uso del método addEventListener(). Tenemos que hacer clic en el dado. botón HTML para ver el efecto.

Ejemplo del método addEventListener().

¿Qué es la expresión regular de Java?

Haga clic en el siguiente botón para ver el efecto.

Haz clic en mí document.getElementById('btn').addEventListener('click', fun); function fun() { document.getElementById('para').innerHTML = 'Hola mundo' + '
' + 'Bienvenido a javaTpoint.com'; }Pruébalo ahora

Producción

JavaScript addEventListener()

Después de hacer clic en el botón HTML proporcionado, el resultado será:

JavaScript addEventListener()

Ahora, en el siguiente ejemplo veremos cómo agregar muchos eventos al mismo elemento sin sobrescribir los eventos existentes.

Ejemplo

En este ejemplo, agregamos varios eventos al mismo elemento.

Este es un ejemplo de cómo agregar múltiples eventos al mismo elemento.

Haga clic en el siguiente botón para ver el efecto.

Haz clic en mí function fun() { alert('Bienvenido a javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Esta es la segunda función'; } function fun2() { document.getElementById('para1').innerHTML = 'Esta es la tercera función'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('clic', divertido); mybtn.addEventListener('hacer clic', fun1); mybtn.addEventListener('hacer clic', fun2);Pruébalo ahora

Producción

JavaScript addEventListener()

Ahora, cuando hagamos clic en el botón, se mostrará una alerta. Después de hacer clic en el botón HTML proporcionado, el resultado será:

JavaScript addEventListener()

Cuando salimos de la alerta, el resultado es:

JavaScript addEventListener()

Ejemplo

En este ejemplo, agregamos varios eventos de diferente tipo al mismo elemento.

los números del alfabeto

Este es un ejemplo de cómo agregar múltiples eventos de diferente tipo al mismo elemento.

Haga clic en el siguiente botón para ver el efecto.

Haz clic en mí function fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'amarillo'; btn.style.color = 'azul'; } function fun1() { document.getElementById('para').innerHTML = 'Esta es la segunda función'; } función fun2() { btn.style.width = ''; btn.estilo.altura = ''; btn.estilo.fondo = ''; btn.estilo.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', divertido); mybtn.addEventListener('hacer clic', fun1); mybtn.addEventListener('mouseout', fun2);Pruébalo ahora

Producción

JavaScript addEventListener()

Cuando movemos el cursor sobre el botón, la salida será:

JavaScript addEventListener()

Después de hacer clic en el botón y dejar el cursor, la salida será:

JavaScript addEventListener()

Burbuja de eventos o captura de eventos

Ahora, entendemos el uso del tercer parámetro de addEventListener() de JavaScript, es decir, utilizar Captura.

instanciando java

En HTML DOM, burbujeante y Capturando son las dos formas de propagación de eventos. Podemos entender estas formas tomando un ejemplo.

Supongamos que tenemos un elemento div y un elemento de párrafo dentro de él, y estamos aplicando el 'hacer clic' evento para ambos usando el agregarEventListener() método. Ahora la pregunta es sobre hacer clic en el elemento del párrafo, qué evento de clic del elemento se maneja primero.

Entonces, en burbujeante, primero se maneja el evento del elemento de párrafo y luego se maneja el evento del elemento div. Significa que en la burbujeación, el evento del elemento interno se maneja primero y luego se manejará el evento del elemento más externo.

En Capturando primero se maneja el evento del elemento div y luego se maneja el evento del elemento de párrafo. Significa que al capturar el evento del elemento externo se maneja primero y luego se manejará el evento del elemento más interno.

cómo determinar el tamaño del monitor 
 addEventListener(event, function, useCapture);

Podemos especificar la propagación usando el utilizarCapturar parámetro. Cuando se establece en falso (que es su valor predeterminado), el evento utiliza propagación burbujeante, y cuando se establece en verdadero, existe la propagación de captura.

Podemos entender el burbujeando y capturando utilizando una ilustración.

Ejemplo

En este ejemplo, hay dos elementos div. Podemos ver el efecto de burbujeo en el primer elemento div y el efecto de captura en el segundo elemento div.

Cuando hacemos doble clic en el elemento span del primer elemento div, el evento del elemento span se maneja primero que el elemento div. Se llama burbujeando .

Pero cuando hacemos doble clic en el elemento span del segundo elemento div, el evento del elemento div se maneja primero que el elemento span. Se llama capturando .

 div{ background-color: lightblue; border: 2px solid red; font-size: 25px; text-align: center; } span{ border: 2px solid blue; } This is a div element. <br> <br> <span id="s2"> This is a span element. </span> document.getElementById(&apos;d1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, false); document.getElementById(&apos;s1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, false); document.getElementById(&apos;d2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, true); document.getElementById(&apos;s2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, true);
Pruébalo ahora

Producción

JavaScript addEventListener()

Tenemos que hacer doble clic en los elementos específicos para ver el efecto.