Vi står grundlæggende over for en eller anden form for situation under programmering i javascript, hvor vi kan oprette en hvilken som helst funktion ved at klikke på knappen. For eksempel er vi nødt til at undersøge noget mere funktionalitet i tidspunktet for automatiseringstest af en webside eller et websted. I sådanne tilfælde bliver javascripts udløsende klikhændelsesteknik mere pålidelig og effektiv til at imødegå de angivne udfordringer.
frø vs sporer
I denne sammenhæng lærer vi om procedurerne for trigger-klik-hændelse i javascript.
Hvordan vi kan udløse klikhændelse i javascript:
Vi er nødt til at anvende teknikkerne nedenfor for at udløse klikhændelsen i javascript:
a) klik() metode
b) addEventListener() og dispathEvent metoder
Nu vil vi bruge de metoder, der har skrevet ovenfor, til at demonstrere som følger:
Metode 1:
Udløs klikhændelse ved hjælp af klikhændelsesmetode i javascript:
På det nævnte element er klikmetode bruges til at udføre handlingen. Ved at bruge den brugerdefinerede funktion, når den ønskede knap klikkes af brugeren ved hjælp af oprettelsen af knappen, hente dens id og udløse klikhændelsen, kan denne metode implementeres.
For yderligere afklaring skal vi gennemgå eksemplet nedenfor:
gimp erstatte farve
Eksempel:
I eksemplet nedenfor med at have 'Klik her' , vil der blive oprettet en knap med id og sammen med klikhændelsen for at få adgang til klikhændelsen på den;
Click here
Ved at angive dets id i javascript, skal vi få adgang til den oprettede knap i document.getElementById metoden. For at udføre den næste handling vil klikhændelsen blive aktiveret.
const get= document.getElementById('btn'); get.click();
Til sidst, når der klikkes på knappen, vil vi definere at udskrive følgende funktion med navnet 'clickEvent()' på en måde, som på konsollen ved hjælp af klikmetoden.
function clickEvent() { console.log('now the Click Event is triggered ') } Fra ovenstående output af den respektive kode, ved at bruge klikmetoden på en automatiseret måde, har vi observeret, at der klikkes på knappen klik her.
Metode 2:
Udløs klikhændelse i javascript ved hjælp af addEventListener() og dispatchEvent() metoden
I javascript er det den integrerede metode, der leveres af javascript-hændelsesmålgrænsefladen.
En begivenhedslytter registreres ved denne metode. Vi kalder vores konfigurerede funktion, når den nævnte hændelse fanges på målet.
Syntaks for begivenheden:
target.addEventListener( $type, $listener); target.addEventListener( $type, $listener, $options); target.addEventListener( $type, $listener, $useCapture);
beskrivelse af syntaksen:
- I ovenstående syntaks er der en parameter kaldet $type , som er en obligatorisk parameter. Ved at angive typen af hændelse, der skal overvåges, accepterer parametrene kun én streng. Denne parameter er en parameter, der skelner mellem store og små bogstaver. Forskellige begivenheder understøttes af det, såsom tastatur, klik, database, input osv
- På samme måde er $lytter er en obligatorisk parameter også i den. En meddelelse om hændelsen modtages af denne parameter som et objekt, når en hændelse af den nævnte type er indtruffet. På javascript-funktionen eller på en Eventlistner-grænseflade bør dette objekt implementeres.
- På den anden side $option er en valgfri parameter i det.
Eksempel: 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;> Eksempel 2:
globale variable js
I dette eksempel vil vi først og fremmest inkludere en knap med et tilsvarende id med en onclick-hændelse sammen med en værdi, der er den samme som den forrige.
Click here
Derefter ved hjælp af addEventListener() metode, henter vi knappen og klikker på begivenheden i den for at angive 'Det er' i sit argument, som refererer til hændelsesklikobjektet.
const get = document.getElementById('btn'); get.addEventListener('click', e => {}); get.dispatchEvent(new Event('click')); Endelig vil vi, som den forrige metode, definere klikhændelsen for at vise den tilsvarende meddelelse i den på det tidspunkt, klikhændelsen udløses.
function clickEvent() { console.log('The required event is triggered ') }