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
Nadat u op de gegeven HTML-knop heeft geklikt, zal de uitvoer zijn:
herstart mysql ubuntu
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 nuUitvoer
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:
Wanneer we de waarschuwing afsluiten, is de uitvoer -
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.
appletKlik 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
Wanneer we de cursor over de knop bewegen, zal de uitvoer zijn:
Nadat u op de knop hebt geklikt en de cursor hebt verlaten, is de uitvoer:
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('d1').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, false); document.getElementById('s1').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, false); document.getElementById('d2').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, true); document.getElementById('s2').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, true); Test het nu Uitvoer
We moeten dubbelklikken op de specifieke elementen om het effect te zien.