Alapvetően valamilyen helyzettel szembesülünk a javascript programozás során, amikor a gombnyomásra bármilyen funkciót létrehozhatunk. Például egy weboldal vagy egy webhely automatizálási tesztelése során további funkcionalitást kell megvizsgálnunk. Ilyen esetekben a JavaScript kiváltó kattintási esemény technikája megbízhatóbbá és hatékonyabbá válik a megfogalmazott kihívások leküzdésében.
Ebben az összefüggésben megismerjük az aktiváló kattintási eseményeket a javascriptben.
Hogyan indíthatunk kattintási eseményt javascriptben:
Alkalmaznunk kell az alábbi technikákat a kattintási esemény aktiválásához javascriptben:
a) click() metódus
különbség a tömb és a tömblista között
b) addEventListener() és dispathEvent metódusok
Most a fent leírt módszereket fogjuk használni a következők bemutatására:
kap kapcsolatot
1. módszer:
Kattintási esemény aktiválása a javascript kattintási esemény módszerével:
Az említett elemen a kattintási módszer a művelet végrehajtására szolgál. A felhasználó által definiált funkció segítségével, amikor a kívánt gombra kattint a felhasználó a gomb létrehozása, azonosítójának lekérése és a kattintási esemény kiváltása segítségével, ez a módszer megvalósítható.
A további tisztázás érdekében végig kell mennünk az alábbi példán:
Példa:
Az alábbi példában a birtokolással 'kattints ide' , akkor létrejön egy gomb azonosítóval és a kattintási eseménnyel együtt a rajta lévő kattintási esemény eléréséhez;
Click here
Az azonosítóját javascriptben megadva a document.getElementById metódusban kell elérnünk a létrehozott gombot. A következő művelet végrehajtásához a kattintási esemény meghívásra kerül.
const get= document.getElementById('btn'); get.click();
Végül a gombra kattintva meghatározzuk a következő elnevezésű funkció kinyomtatását 'clickEvent()' oly módon, hogy a konzolon kattintási módszerrel.
function clickEvent() { console.log('now the Click Event is triggered ') } A megfelelő kód fenti kimenetéből a kattintási módszerrel automatizált módon azt figyeltük meg, hogy az ide kattintva gombra kattintunk.
utazás de
2. módszer:
Kattintási esemény aktiválása javascriptben az addEventListener() és a dispatchEvent() metódus segítségével
A javascriptben ez az integrált módszer, amelyet a javascript eseménycélzó felülete biztosít.
Ezzel a módszerrel egy eseményfigyelőt regisztrálunk. A beállított függvényünket akkor hívjuk meg, ha az említett eseményt elkapjuk a célponton.
Az esemény szintaxisa:
target.addEventListener( $type, $listener); target.addEventListener( $type, $listener, $options); target.addEventListener( $type, $listener, $useCapture);
szintaxis leírása:
- A fenti szintaxisban van egy ún $típus , ami egy kötelező paraméter. A figyelni kívánt esemény típusát jelölve a paraméterek csak egy karakterláncot fogadnak el. Ez a paraméter megkülönbözteti a kis- és nagybetűket. Különféle eseményeket támogat, mint például billentyűzet, kattintás, adatbázis, bevitel stb
- Ugyanígy a $hallgató szintén kötelező paraméter benne. Ez a paraméter objektumként kap értesítést az eseményről, amikor az említett típusú esemény bekövetkezett. A javascript függvényen vagy az Eventlistner felületen ezt az objektumot implementálni kell.
- Másrészt a $opció egy opcionális paraméter benne.
Példa: 1
java időtartama
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;> 2. példa:
Ebben a példában mindenekelőtt egy megfelelő azonosítóval rendelkező gombot fogunk tartalmazni egy onclick eseményhez, valamint az előzőhöz hasonló értéket.
Click here
Ezt követően a segítségével a addEventListener() módszerrel lekérjük a gombot, és a benne lévő eseményre kattintva megadjuk a 'Ez' argumentumában, amely az eseménykattintási objektumra utal.
const get = document.getElementById('btn'); get.addEventListener('click', e => {}); get.dispatchEvent(new Event('click')); Végül, az előző módszerhez hasonlóan, meghatározzuk a kattintási eseményt, hogy a megfelelő üzenet megjelenjen benne a kattintási esemény indításakor.
function clickEvent() { console.log('The required event is triggered ') }