Kako simulirati klik z JavaScriptom?
Za uporabo simulacije klika v JavaScriptu je mogoče uporabiti naslednje pristope:
1. pristop: Simulirajte klik z JavaScriptom z uporabo dogodka onclick
' onclick ” se zgodi ob pritisku na gumb. Ta pristop je mogoče uporabiti za priklic funkcije ob kliku gumba in povečanje ' število klikov « vsakič, ko kliknete gumb.
Stranska opomba: ' onclick ” dogodek lahko preprosto uporabite tako, da ga pripnete z določeno funkcijo.
Primer
Pojdite skozi naslednji delček kode:
< center >
< slog h3 = 'barva-ozadje: svetlomodra;' > Kliknite Simulirano < razpon razred = 'štetje' > razpon > krat h3 >
< ID gumba = 'btn1' onclick = 'countClick()' > Kliknite Jaz ! gumb >
center >
- Vključite navedeni naslov skupaj z » ' za povečanje ' štetje ” klikov.
- V naslednjem koraku ustvarite gumb s priloženim » onclick ” preusmeritev na funkcijo countClick(), do katere bomo dostopali ob kliku na gumb.
Zdaj pa pojdimo skozi naslednje vrstice kode JavaScript:
< scenarij >
naj klikne = 0 ;
funkcija countClick ( ) {
klikov = klikov + 1 ;
dokument. querySelector ( '.count' ) . textContent = klikov ;
}
scenarij >
V zgornjem delu kode js:
- Tukaj najprej inicializirajte klike z ' 0 ”.
- Po tem deklarirajte funkcijo z imenom ' countClick() ”. V njegovi definiciji povečajte inicializirani ' klikov ' z ' 1 ”. To bo povzročilo povečanje števila vsakič, ko kliknete gumb.
- Na koncu odprite » razpon ' z uporabo ' document.querySelector() ” metoda. Uporabite tudi ' textContent ” za dodelitev povečanega števila klikov, o katerem smo govorili prej, elementu span.
Rezultat bo naslednji:
Funkcionalnost povečanega časovnika ob vsakem kliku je mogoče opaziti v zgornjem rezultatu.
2. pristop: simulirajte klik z JavaScriptom prek metode addEventListener().
' addEventListener() ” elementu dodeli obravnavo dogodkov. To metodo je mogoče implementirati tako, da elementu pripnete določen dogodek in opozorite uporabnika na sprožilec dogodka.
Sintaksa
element. addEventListener ( dogodek, funkcija )V podani sintaksi:
- “ dogodek ” se nanaša na ime dogodka.
- “ funkcijo ” kaže na funkcijo, ki se izvede, ko pride do dogodka.
Primer
Spodnja predstavitev pojasnjuje navedeni koncept:
< center >< telo >< a href = '#' id = 'povezava' > Kliknite povezavo a >
telo > center >
< scenarij >
bodi koza = dokument. getElementById ( 'povezava' ) ;
dobiti. addEventListener ( 'klik' , ( ) => opozorilo ( 'Klikni Simulirano!' ) )
scenarij >
V zgornji kodi:
- Najprej določite » sidro ” za vključitev navedene povezave
- V delu kode JavaScript dostopajte do ustvarjene povezave s pomočjo » document.getElementById() ” metoda.
- Na koncu uporabite ' addEventListener() ' metoda do dostopnega ' povezava ”. ' kliknite ” je v tem primeru priložen dogodek, ki bo povzročil opozorilo uporabnika, ko bo kliknil ustvarjeno povezavo.
Izhod
Pristop 3: Simulirajte klik z JavaScriptom z uporabo metode click().
' klik() ” izvede simulacijo klika miške na element. To metodo lahko uporabite za simulacijo klika neposredno na priložene gumbe, kot določa ime.
Sintaksa
element. kliknite ( )V podani sintaksi:
- “ element ” kaže na element, na katerem se bo klik izvedel.
Primer
Naslednji delček kode pojasnjuje navedeni koncept:
< center >< telo >< h3 > Ali si našel to stran v pomoč ? h3 >
< gumb na klik = 'simulateClick()' id = 'simulirati' > ja gumb >
< gumb na klik = 'simulateClick()' id = 'simulirati' > ne gumb >
< h3 id = 'glava' stil = 'barva ozadja: svetlo zelena;' > h3 >
telo > center >
- Najprej vključite navedeni naslov v »
' oznaka. - Nato ustvarite dva različna gumba z navedenimi ID-ji.
- Priložite tudi » onclick ” dogodek, pri čemer oba kličeta funkcijo simulateClick().
- V naslednjem koraku vključite drug naslov z navedenim » id «, da bi uporabnika obvestili takoj, ko se kliknite ” je simuliran.
Zdaj pojdite skozi spodnje vrstice JavaScript:
< scenarij >funkcija simulateClick ( ) {
dokument. getElementById ( 'simulirati' ) . kliknite ( )
naj dobi = dokument. getElementById ( 'glava' )
dobiti. innerText = 'Kliknite Simulirano!'
}
scenarij >
- Določite funkcijo ' simulateClick() ”.
- Tukaj dostopajte do ustvarjenih gumbov s pomočjo » document.getElementById() ' in uporabite ' klik() ” jim.
- Zdaj na podoben način dostopajte do dodeljenega naslova in uporabite » innerText ” za prikaz navedenega sporočila kot naslova ob simuliranem kliku.
Izhod
V zgornjem rezultatu je očitno, da oba ustvarjena gumba simulirata klik.
Ta spletni dnevnik prikazuje, kako uporabiti simulacijo klika z uporabo JavaScripta.
Zaključek
' onclick ' dogodek, ' addEventListener() « ali » klik() ” se lahko uporabi za simulacijo klika z JavaScriptom. ' onclick ” lahko uporabite dogodek za simulacijo klika vsakič, ko kliknete gumb v obliki števca. ' addEventListener() ” se lahko uporabi za pripenjanje dogodka na povezavo in obveščanje uporabnika ob simulaciji klika. ' klik() ” se lahko uporabi za ustvarjene gumbe in izvede zahtevano funkcijo za vsakega od gumbov. Ta zapis pojasnjuje, kako uporabiti simulacijo klika v JavaScriptu.