Practic, ne confruntăm cu un tip de situație în timpul programării în javascript în care putem crea orice funcție la clic pe buton. De exemplu, trebuie să examinăm mai multe funcționalități în timpul testării automatizării unei pagini web sau a unui site. În astfel de cazuri, tehnica de declanșare a evenimentelor de clic din javascript devine mai fiabilă și mai eficientă pentru a contracara provocările menționate.
În acest context, vom afla despre procedurile declanșatorului clic în javascript.
Cum putem declanșa evenimentul de clic în javascript:
Trebuie să aplicăm tehnicile prezentate mai jos pentru a declanșa evenimentul clic în javascript:
a) metoda click().
b) metodele addEventListener() și dispathEvent
Acum vom folosi metodele scrise mai sus pentru a demonstra după cum urmează:
Metoda 1:
Declanșați evenimentul de clic folosind metoda evenimentului de clic în javascript:
Pe elementul menționat, cel metoda click este folosit pentru a efectua acțiunea. Folosind funcția definită de utilizator atunci când butonul dorit este apăsat de utilizator cu ajutorul creării butonului, obținerea ID-ului acestuia și declanșarea evenimentului de clic, această metodă poate fi implementată.
avl rotația arborelui
Pentru mai multe clarificări, trebuie să parcurgem exemplul de mai jos:
Exemplu:
În exemplul dat mai jos cu având 'click aici' , va fi creat un buton cu id și împreună cu evenimentul de clic pentru accesarea evenimentului de clic pe acesta;
Click here
Specificând id-ul acestuia în javascript, trebuie să accesăm butonul creat în metoda document.getElementById. Pentru a efectua următoarea operație, evenimentul clic va fi invocat.
const get= document.getElementById('btn'); get.click();
În cele din urmă, când se face clic pe butonul, vom defini să tipărim următoarea funcție numită „clickEvent()” într-un mod în care pe consolă folosind metoda click.
function clickEvent() { console.log('now the Click Event is triggered ') } Din ieșirea de mai sus a codului respectiv, folosind metoda click în mod automat, am observat că se face clic pe butonul click aici.
Metoda 2:
Declanșați evenimentul de clic în javascript cu ajutorul metodei addEventListener() și dispatchEvent()
În javascript, este metoda integrală furnizată de interfața țintă a evenimentului javascript.
Un ascultător de evenimente este înregistrat prin această metodă. Vom apela funcția noastră configurată atunci când evenimentul menționat este prins pe țintă.
livecricket.este
Sintaxa evenimentului:
target.addEventListener( $type, $listener); target.addEventListener( $type, $listener, $options); target.addEventListener( $type, $listener, $useCapture);
descrierea sintaxei:
- În sintaxa de mai sus, există un parametru numit $type , care este un parametru obligatoriu. Indicând tipul evenimentului de monitorizat, parametrii acceptă doar un șir. Acest parametru este un parametru sensibil la majuscule. Sunt acceptate diferite evenimente, cum ar fi tastatura, clic, baza de date, intrare etc
- În același mod, și $ascultător este un parametru obligatoriu și în el. O notificare despre eveniment este primită de acest parametru ca obiect atunci când a avut loc un eveniment de tipul menționat. Pe funcția javascript sau pe o interfață Eventlistner, acest obiect ar trebui implementat.
- Pe de altă parte, cel $opțiune este o parametru opțional în ea.
Exemplu: 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;> Exemplul 2:
În acest exemplu, în primul rând, vom include un buton cu un id corespunzător cu un eveniment onclick împreună cu o valoare la fel ca și cea precedentă.
Click here
După aceea, cu ajutorul lui addEventListener() metoda, vom prelua butonul și vom face clic pe evenimentul din acesta pentru a specifica 'Este' în argumentul său, care se referă la obiectul de clic pe eveniment.
const get = document.getElementById('btn'); get.addEventListener('click', e => {}); get.dispatchEvent(new Event('click')); În cele din urmă, la fel ca și metoda anterioară, vom defini evenimentul de clic pentru a afișa mesajul corespunzător în el în momentul în care evenimentul de clic este declanșat.
function clickEvent() { console.log('The required event is triggered ') }