Pohjimmiltaan kohtaamme jonkinlaisen tilanteen ohjelmoinnin aikana javascriptissä, jossa voimme luoda minkä tahansa toiminnon painikkeen napsautuksella. Esimerkiksi web-sivun tai sivuston automaatiotestauksen aikana on tutkittava lisää toimintoja. Tällaisissa tapauksissa JavaScriptin käynnistävästä napsautustapahtumatekniikasta tulee luotettavampi ja tehokkaampi esitettyjen haasteiden torjunnassa.
Tässä yhteydessä opimme käynnistämään napsautustapahtumia javascriptissä.
Kuinka voimme käynnistää napsautustapahtuman javascriptissä:
Meidän on käytettävä alla annettuja tekniikoita napsautustapahtuman käynnistämiseksi javascriptissä:
a) click()-menetelmä
js globaali muuttuja
b) addEventListener()- ja dispathEvent-menetelmät
Nyt käytämme yllä kirjoitettuja menetelmiä osoittamaan seuraavasti:
Tapa 1:
Käynnistä klikkaustapahtuma käyttämällä klikkaustapahtumamenetelmää javascriptissä:
Mainitussa elementissä, napsauta menetelmää käytetään toiminnon suorittamiseen. Tämä menetelmä voidaan toteuttaa käyttämällä käyttäjän määrittämää toimintoa, kun käyttäjä klikkaa haluttua painiketta painikkeen luomisen, sen id:n saamisen ja klikkaustapahtuman laukaisemisen avulla.
Lisäselvyyden vuoksi meidän on käytävä läpi alla oleva esimerkki:
Esimerkki:
Alla olevassa esimerkissä, jossa on 'Klikkaa tästä' , luodaan painike, jossa on id ja napsautustapahtuman ohella napsautustapahtuman avaaminen;
Click here
Määrittämällä sen tunnuksen javascriptissä, meidän on käytettävä luotua painiketta document.getElementById-metodissa. Seuraavan toiminnon suorittamiseksi kutsutaan napsautustapahtuma.
const get= document.getElementById('btn'); get.click();
Lopuksi, kun painiketta napsautetaan, määritämme tulostettavan seuraavan toiminnon nimeltä 'clickEvent()' tavalla, joka konsolissa klikkausmenetelmällä.
function clickEvent() { console.log('now the Click Event is triggered ') } Vastaavan koodin yllä olevasta tulosteesta, käyttämällä napsautusmenetelmää automaattisella tavalla, olemme havainneet, että napsautuspainiketta tästä napsautetaan.
Tapa 2:
Käynnistä klikkaustapahtuma javascriptissä addEventListener()- ja dispatchEvent()-metodin avulla
JavaScriptissä se on integraalinen menetelmä, jonka javascriptin tapahtumakohdeliittymä tarjoaa.
Tapahtuman kuuntelija rekisteröidään tällä menetelmällä. Kutsumme määritettyä toimintoamme, kun mainittu tapahtuma havaitaan kohteen.
Tapahtuman syntaksi:
target.addEventListener( $type, $listener); target.addEventListener( $type, $listener, $options); target.addEventListener( $type, $listener, $useCapture);
syntaksin kuvaus:
- Yllä olevassa syntaksissa on parametri nimeltä $tyyppi , joka on pakollinen parametri. Valvottavan tapahtuman tyyppiä osoittavat parametrit hyväksyvät vain yhden merkkijonon. Tämä parametri on isot ja pienet kirjaimet merkitsevä parametri. Se tukee erilaisia tapahtumia, kuten näppäimistö, napsautus, tietokanta, syöttö jne
- Samalla tavalla, $kuuntelija on myös siinä pakollinen parametri. Tämä parametri vastaanottaa ilmoituksen tapahtumasta objektina, kun mainitun tyyppinen tapahtuma on tapahtunut. JavaScript-funktiossa tai Eventlistner-liittymässä tämä objekti tulisi toteuttaa.
- Toisaalta, $optio on valinnainen parametri sen sisällä.
Esimerkki: 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;> Esimerkki 2:
Tässä esimerkissä sisällytämme ensinnäkin painikkeen, jolla on vastaava tunnus ja onclick-tapahtuma sekä arvo, joka on sama kuin edellinen.
Click here
Sen jälkeen avulla addEventListener() menetelmää, haemme painikkeen ja napsautamme siinä olevaa tapahtumaa määrittääksesi 'Se on' argumentissaan, joka viittaa tapahtuman napsautusobjektiin.
const get = document.getElementById('btn'); get.addEventListener('click', e => {}); get.dispatchEvent(new Event('click')); Lopuksi, kuten edellisessä menetelmässä, määritämme napsautustapahtuman näyttämään vastaavan viestin siinä, kun klikkaustapahtuma käynnistyy.
function clickEvent() { console.log('The required event is triggered ') }