logo

TechCodeview

JavaScript addEventListener()

De addEventListener() methode wordt gebruikt om een ​​gebeurtenishandler aan een bepaald element te koppelen. Het overschrijft de bestaande gebeurtenishandlers niet. Er wordt gezegd dat evenementen een essentieel onderdeel zijn van JavaScript. Een webpagina reageert op basis van de gebeurtenis die heeft plaatsgevonden. Gebeurtenissen kunnen door de gebruiker worden gegenereerd of door API's worden gegenereerd. Een gebeurtenislistener is een JavaScript-procedure die wacht op het optreden van een gebeurtenis.

De methode addEventListener() is een ingebouwde functie van JavaScript . We kunnen meerdere gebeurtenishandlers aan een bepaald element toevoegen zonder de bestaande gebeurtenishandlers te overschrijven.

Syntaxis

 element.addEventListener(event, function, useCapture);

Hoewel het drie parameters heeft, zijn de parameters evenement En functie worden veel gebruikt. De derde parameter kan optioneel worden gedefinieerd. De waarden van deze functie worden als volgt gedefinieerd.

Parameterwaarden

evenement: Het is een vereiste parameter. Het kan worden gedefinieerd als een tekenreeks die de naam van de gebeurtenis specificeert.

Opmerking: Gebruik geen voorvoegsel zoals 'aan' bij de parameterwaarde. Gebruik bijvoorbeeld 'klik' in plaats van 'onclick'.

functie: Het is ook een vereiste parameter. Het is een JavaScript-functie die op de gebeurtenis reageert.

reeks van array in c

gebruikCapture: Het is een optionele parameter. Het is een waarde van het Booleaanse type die specificeert of de gebeurtenis wordt uitgevoerd in de bubble- of capture-fase. De mogelijke waarden zijn WAAR En vals . Wanneer deze is ingesteld op true, wordt de gebeurtenishandler uitgevoerd in de vastlegfase. Wanneer deze is ingesteld op false, wordt de handler uitgevoerd in de bubbelfase. De standaardwaarde is vals .

Laten we enkele illustraties bekijken van het gebruik van de addEventListener() -methode.

Voorbeeld

Het is een eenvoudig voorbeeld van het gebruik van de methode addEventListener(). We moeten op het gegeven klikken HTML-knop om het effect te zien.

Voorbeeld van de methode addEventListener().

Klik op de volgende knop om het effect te zien.

Klik op mij document.getElementById('btn').addEventListener('klik', leuk); function fun() { document.getElementById('para').innerHTML = 'Hallo wereld' + '
' + 'Welkom bij javaTpoint.com'; }Test het nu

Uitvoer

JavaScript addEventListener()

Nadat u op de gegeven HTML-knop heeft geklikt, zal de uitvoer zijn:

herstart mysql ubuntu
JavaScript addEventListener()

In het volgende voorbeeld zullen we zien hoe we veel gebeurtenissen aan hetzelfde element kunnen toevoegen zonder de bestaande gebeurtenissen te overschrijven.

Voorbeeld

In dit voorbeeld voegen we meerdere gebeurtenissen toe aan hetzelfde element.

Dit is een voorbeeld van het toevoegen van meerdere gebeurtenissen aan hetzelfde element.

Klik op de volgende knop om het effect te zien.

Klik op mij functie fun() { alert('Welkom bij javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Dit is de tweede functie'; } function fun2() { document.getElementById('para1').innerHTML = 'Dit is de derde functie'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('klik', leuk); mybtn.addEventListener('klik', fun1); mybtn.addEventListener('klik', fun2);Test het nu

Uitvoer

JavaScript addEventListener()

Wanneer we nu op de knop klikken, wordt er een waarschuwing weergegeven. Nadat u op de gegeven HTML-knop heeft geklikt, zal de uitvoer zijn:

JavaScript addEventListener()

Wanneer we de waarschuwing afsluiten, is de uitvoer -

JavaScript addEventListener()

Voorbeeld

In dit voorbeeld voegen we meerdere gebeurtenissen van een ander type toe aan hetzelfde element.

Dit is een voorbeeld van het toevoegen van meerdere gebeurtenissen van verschillende typen aan hetzelfde element.

int te verdubbelen

Klik op de volgende knop om het effect te zien.

applet
Klik op mij functie fun() {btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'geel'; btn.style.color = 'blauw'; } function fun1() { document.getElementById('para').innerHTML = 'Dit is de tweede functie'; } functie fun2() {btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', leuk); mybtn.addEventListener('klik', fun1); mybtn.addEventListener('mouseout', fun2);Test het nu

Uitvoer

JavaScript addEventListener()

Wanneer we de cursor over de knop bewegen, zal de uitvoer zijn:

JavaScript addEventListener()

Nadat u op de knop hebt geklikt en de cursor hebt verlaten, is de uitvoer:

JavaScript addEventListener()

Evenement borrelen of evenement vastleggen

Nu begrijpen we het gebruik van de derde parameter van JavaScript's addEventListener(), d.w.z. gebruikCapture.

In HTML-DOM, Borrelen En Vastleggen zijn de twee manieren waarop gebeurtenissen zich kunnen voortplanten. We kunnen deze manieren begrijpen door een voorbeeld te nemen.

Stel dat we een div-element en een paragraaf-element erin hebben, en we passen de 'Klik' evenement voor beiden met behulp van de addEventListener() methode. De vraag gaat nu over het klikken op het alinea-element, waarbij de klikgebeurtenis van het element als eerste wordt afgehandeld.

Dus, binnen Borrelen, De gebeurtenis van het paragraafelement wordt eerst afgehandeld, en daarna wordt de gebeurtenis van het div-element afgehandeld. Het betekent dat bij het borrelen eerst de gebeurtenis van het binnenste element wordt afgehandeld, en daarna de gebeurtenis van het buitenste element.

In Vastleggen De gebeurtenis van het div-element wordt eerst afgehandeld, en daarna wordt de gebeurtenis van het paragraafelement afgehandeld. Het betekent dat bij het vastleggen eerst de gebeurtenis van het buitenste element wordt afgehandeld, en daarna de gebeurtenis van het binnenste element.

iPhone-emoji's op Android 
 addEventListener(event, function, useCapture);

We kunnen de voortplanting specificeren met behulp van de gebruikCapture parameter. Wanneer deze is ingesteld op false (wat de standaardwaarde is), maakt de gebeurtenis gebruik van borrelende voortplanting, en wanneer deze is ingesteld op waar, is er sprake van vastleggende voortplanting.

Wij kunnen de borrelen En vastleggen met behulp van een illustratie.

Voorbeeld

In dit voorbeeld zijn er twee div-elementen. We kunnen het borrelende effect zien op het eerste div-element en het vangeffect op het tweede div-element.

Wanneer we dubbelklikken op het span-element van het eerste div-element, wordt de gebeurtenis van het span-element eerst afgehandeld dan het div-element. Het heet borrelen .

Maar als we dubbelklikken op het span-element van het tweede div-element, wordt de gebeurtenis van het div-element eerst afgehandeld dan het span-element. Het heet vastleggen .

 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);
Test het nu

Uitvoer

JavaScript addEventListener()

We moeten dubbelklikken op de specifieke elementen om het effect te zien.