Kaip imituoti paspaudimą naudojant „JavaScript“?
Norint taikyti paspaudimo modeliavimą „JavaScript“, galima taikyti šiuos metodus:
1 metodas: imituokite paspaudimą naudodami „JavaScript“, naudodami „onclick“ įvykį
„ paspaudus “ įvykis įvyksta paspaudus mygtuką. Šis metodas gali būti taikomas norint iškviesti funkciją spustelėjus mygtuką ir padidinti „ paspaudimų skaičius “ kiekvieną kartą paspaudus mygtuką.
Paraštės užrašas: „ paspaudus “ įvykį galima tiesiog pritaikyti pridedant jį su tam tikra funkcija.
Pavyzdys
Peržiūrėkite šį kodo fragmentą:
< centras >
< h3 stilius = 'fono spalva: šviesiai mėlyna;' > Spustelėkite Imituotas < tarpas klasė = 'skaičiuoti' > tarpas > laikai h3 >
< mygtuko ID = 'btn1' paspaudus = 'countClick()' > Paspausk mane ! mygtuką >
centras >
- Įtraukite nurodytą antraštę kartu su „ ' žyma, kad padidintumėte ' skaičiuoti “ paspaudimų.
- Kitame veiksme sukurkite mygtuką su pridėtu „ paspaudus ” įvykis, nukreipiantis į funkciją countClick(), kuri bus pasiekiama spustelėjus mygtuką.
Dabar eikime per šias „JavaScript“ kodo eilutes:
< scenarijus >
leiskite spustelėti = 0 ;
funkcija countSpustelėkite ( ) {
paspaudimų = paspaudimų + 1 ;
dokumentas. querySelector ( '.count' ) . teksto Turinys = paspaudimų ;
}
scenarijus >
Aukščiau pateiktoje js kodo dalyje:
- Čia pirmiausia inicijuokite paspaudimus naudodami „ 0 “.
- Po to paskelbkite funkciją pavadinimu ' countClick () “. Jo apibrėžime padidinkite inicijuotą ' paspaudimų ' su ' 1 “. Taip kiekvieną kartą spustelėjus mygtuką skaičius padidės.
- Galiausiai pasiekite „ tarpas “ elementą naudojant „ document.querySelector() “ metodas. Taip pat taikykite „ teksto Turinys ” ypatybę, kad padidintų paspaudimų skaičius, aptartas anksčiau, būtų priskirtas span elementui.
Išvestis bus tokia:
Padidinto laikmačio funkcionalumą po kiekvieno paspaudimo galima stebėti aukščiau pateiktame išvestyje.
2 metodas: imituokite paspaudimą naudodami „JavaScript“ naudodami metodą addEventListener().
„ addEventListener() “ metodas elementui priskiria įvykių tvarkyklę. Šis metodas gali būti įgyvendintas pridedant konkretų įvykį prie elemento ir įspėjant vartotoją apie įvykio paleidiklį.
Sintaksė
elementas. addEventListener ( įvykis, funkcija )Nurodytoje sintaksėje:
- “ įvykis “ nurodo įvykio pavadinimą.
- “ funkcija “ nurodo funkciją, kuri turi būti vykdoma įvykus įvykiui.
Pavyzdys
Žemiau pateikta demonstracija paaiškina nurodytą koncepciją:
< centras >< kūnas >< a href = '#' id = 'nuoroda' > Spustelėkite nuorodą a >
kūnas > centras >
< scenarijus >
būk ožka = dokumentas. getElementById ( 'nuoroda' ) ;
gauti. addEventListener ( 'spustelėkite' , ( ) => budrus ( 'Spustelėkite Imituotas!' ) )
scenarijus >
Aukščiau pateiktame kode:
- Pirmiausia nurodykite „ inkaras “ žymą, kad įtrauktumėte nurodytą nuorodą
- Kodo „JavaScript“ dalyje pasiekite sukurtą nuorodą naudodami „ document.getElementById() “ metodas.
- Galiausiai pritaikykite „ addEventListener() ' metodas prie pasiekto ' nuoroda “. „ spustelėkite “ šiuo atveju pridedamas įvykis, dėl kurio vartotojas bus įspėtas spustelėjus sukurtą nuorodą.
Išvestis
3 metodas: imituokite paspaudimą naudodami „JavaScript“, naudodami metodą „click“ ().
„ spustelėkite () “ metodas atlieka elemento pelės paspaudimo modeliavimą. Šis metodas gali būti naudojamas imituojant tiesioginį pridėtų mygtukų paspaudimą, kaip nurodo pavadinimas.
Sintaksė
elementas. spustelėkite ( )Nurodytoje sintaksėje:
- “ elementas “ nurodo elementą, ant kurio bus atliktas paspaudimas.
Pavyzdys
Šis kodo fragmentas paaiškina nurodytą koncepciją:
< centras >< kūnas >< h3 > Ar radote tai puslapis naudingas ? h3 >
< mygtukas onclick = 'simulateClick()' id = 'imituoti' > Taip mygtuką >
< mygtukas onclick = 'simulateClick()' id = 'imituoti' > Ne mygtuką >
< h3 id = 'galva' stilius = 'fono spalva: šviesiai žalia;' > h3 >
kūnas > centras >
- Pirmiausia įtraukite nurodytą antraštę į „
“ žymą. - Po to sukurkite du skirtingus mygtukus su nurodytais ID.
- Taip pat pridėkite „ paspaudus “ įvykis, kai abu iškviečia funkciją simulateClick().
- Kitame veiksme įtraukite kitą antraštę su nurodytu ' id “, kad praneštų vartotojui, kai tik „ spustelėkite “ yra imituojamas.
Dabar eikite per toliau pateiktas „JavaScript“ eilutes:
< scenarijus >funkcija simulateClick ( ) {
dokumentas. getElementById ( 'imituoti' ) . spustelėkite ( )
leisk gauti = dokumentas. getElementById ( 'galva' )
gauti. vidinisTekstas = 'Spustelėkite Imituotas!'
}
scenarijus >
- Apibrėžkite funkciją ' simuliuotiClick() “.
- Čia pasiekite sukurtus mygtukus naudodami „ document.getElementById() “ metodą ir taikykite „ spustelėkite () “ metodas jiems.
- Dabar panašiai pasiekite priskirtą antraštę ir pritaikykite „ vidinisTekstas “ ypatybę, kad imituojant paspaudimą nurodytas pranešimas būtų rodomas kaip antraštė.
Išvestis
Aukščiau pateiktame išvestyje akivaizdu, kad abu sukurti mygtukai imituoja paspaudimą.
Šiame tinklaraštyje parodyta, kaip pritaikyti paspaudimo modeliavimą naudojant „JavaScript“.
Išvada
„ paspaudus “ renginys, “ addEventListener() “ metodas arba „ spustelėkite () “ metodas gali būti naudojamas paspaudimui imituoti naudojant „JavaScript“. „ paspaudus “ įvykis gali būti taikomas norint imituoti paspaudimą kiekvieną kartą, kai spustelėjamas mygtukas skaitiklio pavidalu. „ addEventListener() “ metodas gali būti naudojamas įvykiui pridėti prie nuorodos ir informuoti vartotoją apie paspaudimo modeliavimą. „ spustelėkite () ” metodas gali būti pritaikytas sukurtiems mygtukams ir atlieka reikiamą funkcionalumą kiekvienam iš mygtukų. Šiame rašte paaiškinama, kaip pritaikyti paspaudimo modeliavimą „JavaScript“.