Tijdens het programmeren in javascript worden we feitelijk geconfronteerd met een soort situatie waarin we elke functie met een klik op de knop kunnen creëren. We moeten bijvoorbeeld wat meer functionaliteit onderzoeken in de tijd van het automatiseren van testen van een webpagina of een site. In dergelijke gevallen wordt de triggerende klikgebeurtenistechniek van javascript betrouwbaarder en efficiënter om de genoemde uitdagingen het hoofd te bieden.
In deze context zullen we leren over de trigger-klikgebeurtenisprocedures in javascript.
Hoe we een klikgebeurtenis in JavaScript kunnen activeren:
We moeten de onderstaande technieken toepassen om de klikgebeurtenis in JavaScript te activeren:
a) klik() methode
b) methoden addEventListener() en dispathEvent
Nu zullen we de hierboven beschreven methoden gebruiken om het volgende aan te tonen:
Methode 1:
Activeer een klikgebeurtenis met behulp van de klikgebeurtenismethode in JavaScript:
Op het genoemde element, de klik methode wordt gebruikt om de actie uit te voeren. Door gebruik te maken van de door de gebruiker gedefinieerde functie wanneer de gebruiker op de vereiste knop klikt met behulp van het maken van de knop, het verkrijgen van de ID ervan en het activeren van de klikgebeurtenis, kan deze methode worden geïmplementeerd.
Voor verdere verduidelijking moeten we het onderstaande voorbeeld doorlopen:
Voorbeeld:
In het onderstaande voorbeeld met hebben 'Klik hier' , er wordt een knop gemaakt met id en samen met de klikgebeurtenis voor toegang tot de klikgebeurtenis erop;
Click here
Door de ID in javascript op te geven, hebben we toegang tot de gemaakte knop in de document.getElementById-methode. Om de volgende bewerking uit te voeren, wordt de klikgebeurtenis aangeroepen.
const get= document.getElementById('btn'); get.click();
Eindelijk, wanneer op de knop wordt geklikt, zullen we bepalen of de volgende functie met de naam moet worden afgedrukt 'klikEvent()' op een manier die op de console gebeurt met behulp van de klikmethode.
function clickEvent() { console.log('now the Click Event is triggered ') } Uit de bovenstaande uitvoer van de betreffende code, waarbij op geautomatiseerde wijze gebruik wordt gemaakt van de klikmethode, hebben we waargenomen dat op de knopklik hier wordt geklikt.
Methode 2:
Activeer de klikgebeurtenis in JavaScript met behulp van de methoden addEventListener() en dispatchEvent().
In JavaScript is dit de integrale methode die wordt geleverd door de JavaScript-gebeurtenisdoelinterface.
Via deze methode wordt een gebeurtenislistener geregistreerd. We zullen onze geconfigureerde functie aanroepen wanneer de genoemde gebeurtenis op het doel wordt opgemerkt.
Syntaxis van de gebeurtenis:
target.addEventListener( $type, $listener); target.addEventListener( $type, $listener, $options); target.addEventListener( $type, $listener, $useCapture);
beschrijving van de syntaxis:
- In de bovenstaande syntaxis is er een parameter genaamd $type , wat een verplichte parameter is. De parameters geven het type gebeurtenis aan dat moet worden bewaakt en accepteren slechts één tekenreeks. Deze parameter is hoofdlettergevoelig. Er worden verschillende gebeurtenissen door ondersteund, zoals toetsenbord, klik, database, invoer, etc
- Op dezelfde manier wordt de $luisteraar is er ook een verplichte parameter in. Een melding over de gebeurtenis wordt door deze parameter als object ontvangen wanneer een gebeurtenis van het genoemde type heeft plaatsgevonden. Op de javascript-functie of op een Eventlistner-interface moet dit object worden geïmplementeerd.
- Aan de andere kant, de $ optie is een optionele parameter in het.
Voorbeeld 1
Open bing const link = document.getElementById('btn'); link.addEventListener('click', e => {}); for(let i = 0; i <5; i++) { link.dispatchevent(new event('click')); } function opengooglebymethod() console.log('the required event is triggered') < pre> <p> <strong>Output:</strong> </p> <pre> 'The required event is triggered'. 'The required event is triggered'. 'The required event is triggered'. 'The required event is triggered'. 'The required event is triggered'. </pre> <p> <strong>Example 2:</strong> </p> <p>In this example, first of all, we will include a button with a corresponding id with an onclick event along with a value as same as like previous one.</p> <pre> Click here </pre> <p>After that, with the help of the <strong> <em>addEventListener()</em> </strong> method, we will retrieve the button and click the event in it to specify the <strong> <em>'e'</em> </strong> in its argument, which refers to the event click object.</p> <pre> const get = document.getElementById('btn'); get.addEventListener('click', e => {}); get.dispatchEvent(new Event('click')); </pre> <p>Finally, as same as the previous method, we will define the click event to display the corresponding message in it at the time the click event is triggered.</p> <pre> function clickEvent() { console.log('The required event is triggered ') } </pre> <hr></5;> Voorbeeld 2:
In dit voorbeeld zullen we allereerst een knop opnemen met een corresponderende ID met een onclick-gebeurtenis, samen met een waarde die dezelfde is als de vorige.
Click here
Daarna, met behulp van de addEventListener() methode, halen we de knop op en klikken op de gebeurtenis erin om de 'Het is' in zijn argument, dat verwijst naar het gebeurtenisklikobject.
const get = document.getElementById('btn'); get.addEventListener('click', e => {}); get.dispatchEvent(new Event('click')); Ten slotte zullen we, net als bij de vorige methode, de klikgebeurtenis definiëren om het overeenkomstige bericht daarin weer te geven op het moment dat de klikgebeurtenis wordt geactiveerd.
function clickEvent() { console.log('The required event is triggered ') }