Vi står i princip inför någon typ av situation under programmering i javascript där vi kan skapa vilken funktion som helst på knappen klicka. Till exempel måste vi undersöka lite mer funktionalitet i tiden för automatiseringstestning av en webbsida eller en webbplats. I sådana fall blir javascripts utlösande klickhändelseteknik mer tillförlitlig och effektiv för att motverka de angivna utmaningarna.
I detta sammanhang kommer vi att lära oss om procedurerna för trigger click-händelser i javascript.
Hur vi kan utlösa klickhändelser i javascript:
Vi måste tillämpa teknikerna nedan för att utlösa klickhändelsen i javascript:
a) click()-metoden
b) metoderna addEventListener() och dispathEvent
Nu kommer vi att använda metoderna som har skrivits ovan för att demonstrera enligt följande:
Metod 1:
Utlösa klickhändelse med klickhändelsemetoden i javascript:
På det nämnda elementet klickmetoden används för att utföra åtgärden. Genom att använda den användardefinierade funktionen när den önskade knappen klickas av användaren med hjälp av att skapa knappen, få dess id och utlösa klickhändelsen, kan denna metod implementeras.
För ytterligare förtydligande måste vi gå igenom exemplet nedan:
Exempel:
I exemplet nedan med att ha 'Klicka här' , kommer en knapp att skapas med id och tillsammans med klickhändelsen för att komma åt klickhändelsen på den;
Click here
Genom att ange dess id i javascript måste vi komma åt den skapade knappen i metoden document.getElementById. För att utföra nästa operation kommer klickhändelsen att anropas.
const get= document.getElementById('btn'); get.click();
Till sist, när knappen klickas, kommer vi att definiera att skriva ut följande funktion med namnet 'clickEvent()' på ett sätt som på konsolen med klickmetoden.
function clickEvent() { console.log('now the Click Event is triggered ') } Från ovanstående utdata av respektive kod, med hjälp av klickmetoden på ett automatiserat sätt, har vi observerat att knappen klicka här klickas.
Metod 2:
Utlösa klickhändelse i javascript med hjälp av addEventListener() och dispatchEvent() metoden
I javascript är det den integrerade metoden som tillhandahålls av javascript-händelsemålgränssnittet.
En händelseavlyssnare registreras med denna metod. Vi kommer att anropa vår konfigurerade funktion när den nämnda händelsen fångas på målet.
Syntax för händelsen:
target.addEventListener( $type, $listener); target.addEventListener( $type, $listener, $options); target.addEventListener( $type, $listener, $useCapture);
beskrivning av syntaxen:
- I ovanstående syntax finns en parameter som kallas $typ , vilket är en obligatorisk parameter. Parametrarna anger vilken typ av händelse som ska övervakas och accepterar endast en sträng. Denna parameter är en skiftlägeskänslig parameter. Olika händelser stöds av det, såsom tangentbord, klick, databas, inmatning, etc
- På samma sätt $lyssnare är en obligatorisk parameter också i den. Ett meddelande om händelsen tas emot av denna parameter som ett objekt när en händelse av nämnda typ har inträffat. På javascript-funktionen eller på ett Eventlistner-gränssnitt bör detta objekt implementeras.
- Å andra sidan $option är en valfri parameter i det.
Exempel: 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;> Exempel 2:
I det här exemplet kommer vi först och främst att inkludera en knapp med ett motsvarande id med en onclick-händelse tillsammans med ett värde som är likadant som föregående.
Click here
Efter det, med hjälp av addEventListener() metod kommer vi att hämta knappen och klicka på händelsen i den för att ange 'Det är' i sitt argument, som hänvisar till händelseklickobjektet.
const get = document.getElementById('btn'); get.addEventListener('click', e => {}); get.dispatchEvent(new Event('click')); Slutligen, på samma sätt som den föregående metoden, kommer vi att definiera klickhändelsen för att visa motsvarande meddelande i den vid den tidpunkt då klickhändelsen utlöses.
function clickEvent() { console.log('The required event is triggered ') }