logo

TechCodeview

JavaScript addEventListener()

El addEventListener() El mètode s'utilitza per adjuntar un controlador d'esdeveniments a un element concret. No anul·la els controladors d'esdeveniments existents. Es diu que els esdeveniments són una part essencial del JavaScript. Una pàgina web respon segons l'esdeveniment ocorregut. Els esdeveniments poden ser generats per l'usuari o generats per API. Un escolta d'esdeveniments és un procediment de JavaScript que espera l'ocurrència d'un esdeveniment.

El mètode addEventListener() és una funció integrada de JavaScript . Podem afegir diversos controladors d'esdeveniments a un element concret sense sobreescriure els controladors d'esdeveniments existents.

Sintaxi

 element.addEventListener(event, function, useCapture);

Encara que té tres paràmetres, els paràmetres esdeveniment i funció són àmpliament utilitzats. El tercer paràmetre és opcional de definir. Els valors d'aquesta funció es defineixen de la següent manera.

Valors dels paràmetres

esdeveniment: És un paràmetre obligatori. Es pot definir com una cadena que especifica el nom de l'esdeveniment.

Nota: no utilitzeu cap prefix com ara 'activat' amb el valor del paràmetre. Per exemple, utilitzeu 'clic' en lloc d'utilitzar 'onclick'.

funció: També és un paràmetre obligatori. És un Funció JavaScript que respon a l'esdeveniment ocorregut.

millorat per al bucle java

useCapture: És un paràmetre opcional. És un valor de tipus booleà que especifica si l'esdeveniment s'executa en la fase de bombolla o de captura. Els seus valors possibles són veritat i fals . Quan s'estableix en true, el controlador d'esdeveniments s'executa a la fase de captura. Quan es defineix com a fals, el controlador s'executa en la fase de bombolla. El seu valor predeterminat és fals .

Vegem algunes de les il·lustracions de l'ús del mètode addEventListener().

Exemple

És un exemple senzill d'utilitzar el mètode addEventListener(). Hem de fer clic al donat botó HTML per veure l'efecte.

Exemple del mètode addEventListener().

versions d'Android

Feu clic al botó següent per veure l'efecte.

Feu clic a mi document.getElementById('btn').addEventListener('clic', divertit); function fun() { document.getElementById('para').innerHTML = 'Hola món' + '
' + 'Benvingut a javaTpoint.com'; }Prova-ho ara

Sortida

JavaScript addEventListener()

Després de fer clic al botó HTML donat, la sortida serà -

JavaScript addEventListener()

Ara, en el següent exemple veurem com afegir molts esdeveniments al mateix element sense sobreescriure els esdeveniments existents.

Exemple

En aquest exemple, estem afegint diversos esdeveniments al mateix element.

Aquest és un exemple d'afegir diversos esdeveniments al mateix element.

Feu clic al botó següent per veure l'efecte.

Feu clic a mi function fun() { alert('Benvingut a javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Aquesta és la segona funció'; } function fun2() { document.getElementById('para1').innerHTML = 'Aquesta és la tercera funció'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('clic', divertit); mybtn.addEventListener('clic', fun1); mybtn.addEventListener('clic', fun2);Prova-ho ara

Sortida

JavaScript addEventListener()

Ara, quan fem clic al botó, es mostrarà una alerta. Després de fer clic al botó HTML donat, la sortida serà -

ordre touch a linux
JavaScript addEventListener()

Quan sortim de l'alerta, la sortida és -

JavaScript addEventListener()

Exemple

En aquest exemple, estem afegint diversos esdeveniments d'un tipus diferent al mateix element.

Aquest és un exemple d'afegir diversos esdeveniments de tipus diferent al mateix element.

Feu clic al botó següent per veure l'efecte.

Feu clic a la funció fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'groc'; btn.style.color = 'blau'; } function fun1() { document.getElementById('para').innerHTML = 'Aquesta és la segona funció'; } funció fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('passar el ratolí', divertit); mybtn.addEventListener('clic', fun1); mybtn.addEventListener('mouseout', fun2);Prova-ho ara

Sortida

JavaScript addEventListener()

Quan movem el cursor sobre el botó, la sortida serà -

JavaScript addEventListener()

Després de fer clic al botó i deixar el cursor, la sortida serà -

JavaScript addEventListener()

Bombolleig d'esdeveniments o captura d'esdeveniments

Ara, entenem l'ús del tercer paràmetre de addEventListener() de JavaScript, és a dir, utilitza Capture.

comparació de cadenes en java

En HTML DOM, Bombolleig i Captura són les dues maneres de propagar l'esdeveniment. Podem entendre aquestes maneres prenent un exemple.

Suposem que tenim un element div i un element paràgraf dins, i estem aplicant el 'clic' esdeveniment a tots dos utilitzant el addEventListener() mètode. Ara la pregunta és fer clic a l'element del paràgraf, l'esdeveniment de clic de quin element es gestiona primer.

Així, en bombolleig, primer es gestiona l'esdeveniment de l'element paràgraf i després es gestiona l'esdeveniment de l'element div. Vol dir que en bombolles, primer es gestiona l'esdeveniment de l'element interior i després es gestionarà l'esdeveniment de l'element més extern.

En Captura primer es gestiona l'esdeveniment de l'element div i després es gestiona l'esdeveniment de l'element paràgraf. Significa que en capturar l'esdeveniment de l'element exterior es gestiona primer, i després es gestionarà l'esdeveniment de l'element més interior.

on és la configuració del navegador 
 addEventListener(event, function, useCapture);

Podem especificar la propagació mitjançant el utilitza Capture paràmetre. Quan s'estableix com a fals (que és el seu valor predeterminat), l'esdeveniment utilitza la propagació de bombolles i, quan s'estableix en true, hi ha la propagació de captura.

Podem entendre el bombolleig i capturant utilitzant una il·lustració.

Exemple

En aquest exemple, hi ha dos elements div. Podem veure l'efecte bombolla en el primer element div i l'efecte de captura en el segon element div.

Quan fem doble clic a l'element span del primer element div, l'esdeveniment de l'element span es gestiona primer que l'element div. Es diu bombolleig .

Però quan fem doble clic a l'element span del segon element div, l'esdeveniment de l'element div es gestiona primer que l'element span. Es diu capturant .

 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);
Prova-ho ara

Sortida

JavaScript addEventListener()

Hem de fer doble clic en els elements específics per veure l'efecte.