Bagaimana untuk Mensimulasikan Klik Dengan JavaScript?
Pendekatan berikut boleh dilaksanakan untuk menggunakan simulasi klik dalam JavaScript:
Pendekatan 1: Simulasikan Klik Dengan JavaScript Menggunakan Acara onclick
Sebuah “ onclick ” peristiwa berlaku apabila butang ditekan. Pendekatan ini boleh digunakan untuk menggunakan fungsi apabila klik butang dan meningkatkan ' kiraan klik ” setiap kali butang itu diklik.
Nota sampingan: Sebuah “ onclick ” acara hanya boleh digunakan dengan melampirkannya dengan fungsi tertentu.
Contoh
Pergi melalui coretan kod berikut:
< pusat >
< gaya h3 = 'warna latar belakang: biru muda;' > Klik Simulasi < rentang kelas = 'kira' > rentang > kali h3 >
< id butang = 'btn1' onclick = 'countClick()' > Klik Saya ! butang >
pusat >
- Sertakan tajuk yang ditentukan bersama-sama dengan ' teg ' untuk menambah ' kira ” daripada klik.
- Dalam langkah seterusnya, buat butang dengan dilampirkan ' onclick ” acara mengubah hala ke fungsi countClick() yang akan diakses apabila butang klik.
Sekarang, mari kita lihat baris kod JavaScript berikut:
< skrip >
biarkan klik = 0 ;
fungsi countClick ( ) {
klik = klik + 1 ;
dokumen. querySelector ( '.kira' ) . kandungan teks = klik ;
}
skrip >
Dalam bahagian js di atas kod:
- Di sini, mula-mula mulakan klik dengan ' 0 ”.
- Selepas itu, isytiharkan fungsi bernama ' countClick() ”. Dalam definisinya, tambahkan ' klik ” dengan “ 1 ”. Ini akan menyebabkan kiraan bertambah setiap kali butang diklik.
- Akhir sekali, akses ' rentang elemen ” menggunakan “ document.querySelector() ” kaedah. Juga, gunakan ' kandungan teks ” harta untuk memperuntukkan kiraan klik tambahan yang dibincangkan sebelum ini kepada elemen span.
Outputnya adalah seperti berikut:
Kefungsian pemasa yang ditambah pada setiap klik boleh diperhatikan dalam output di atas.
Pendekatan 2: Simulasikan Klik Dengan JavaScript melalui Kaedah addEventListener().
' addEventListener() ” kaedah memperuntukkan pengendali acara kepada elemen. Kaedah ini boleh dilaksanakan dengan melampirkan peristiwa tertentu pada elemen dan memberi amaran kepada pengguna mengenai pencetus peristiwa tersebut.
Sintaks
unsur. addEventListener ( acara, fungsi )Dalam sintaks yang diberikan:
- “ peristiwa ” merujuk kepada nama acara.
- “ fungsi ” menunjuk kepada fungsi untuk dilaksanakan apabila peristiwa itu berlaku.
Contoh
Demonstrasi yang diberikan di bawah menerangkan konsep yang dinyatakan:
< pusat >< badan >< a href = '#' ID = 'pautan' > Klik pautan a >
badan > pusat >
< skrip >
jadi kambing = dokumen. getElementById ( 'pautan' ) ;
dapatkan. addEventListener ( 'klik' , ( ) => amaran ( 'Klik Simulasi!' ) )
skrip >
Dalam kod di atas:
- Pertama, nyatakan ' sauh teg ” untuk memasukkan pautan yang ditentukan
- Dalam bahagian JavaScript kod, akses pautan yang dibuat menggunakan ' document.getElementById() ” kaedah.
- Akhir sekali, gunakan ' addEventListener() ' kaedah kepada yang diakses ' pautan ”. ' klik ” acara dilampirkan dalam kes ini yang akan menyebabkan pengguna dimaklumkan apabila mengklik pautan yang dibuat.
Pengeluaran
Pendekatan 3: Simulasikan Klik Dengan JavaScript Menggunakan Kaedah klik().
' klik() ” kaedah melakukan simulasi klik tetikus pada elemen. Kaedah ini boleh digunakan untuk mensimulasikan klik terus ke butang yang dilampirkan seperti namanya.
Sintaks
unsur. klik ( )Dalam sintaks yang diberikan:
- “ unsur ” menunjuk kepada elemen yang mana klik akan dilaksanakan.
Contoh
Coretan kod berikut menerangkan konsep yang dinyatakan:
< pusat >< badan >< h3 > Adakah awak jumpa ini halaman membantu ? h3 >
< butang onclick = 'simulateClick()' ID = 'simulasi' > ya butang >
< butang onclick = 'simulateClick()' ID = 'simulasi' > Tidak butang >
< id h3 = 'kepala' gaya = 'warna latar belakang: hijau muda;' > h3 >
badan > pusat >
- Pertama, masukkan tajuk yang dinyatakan dalam '
” tag. - Selepas itu, buat dua butang berbeza dengan id yang ditentukan.
- Juga, lampirkan ' onclick ” acara dengan kedua-duanya menggunakan fungsi simulateClick().
- Dalam langkah seterusnya, masukkan tajuk lain dengan ' ID ' untuk memberitahu pengguna sebaik sahaja ' klik ” disimulasikan.
Sekarang, pergi melalui baris JavaScript yang diberikan di bawah:
< skrip >fungsi simulateClick ( ) {
dokumen. getElementById ( 'simulasi' ) . klik ( )
biar dapat = dokumen. getElementById ( 'kepala' )
dapatkan. innerTeks = 'Klik Simulasi!'
}
skrip >
- Tentukan fungsi ' simulateClick() ”.
- Di sini, akses butang yang dibuat menggunakan ' document.getElementById() kaedah ' dan gunakan ' klik() ” kaedah kepada mereka.
- Sekarang, begitu juga, akses tajuk yang diperuntukkan dan gunakan ' innerTeks ” untuk memaparkan mesej yang dinyatakan sebagai tajuk pada klik simulasi.
Pengeluaran
Dalam output di atas, adalah jelas bahawa kedua-dua butang yang dicipta mensimulasikan klik.
Blog ini menunjukkan cara menggunakan simulasi klik menggunakan JavaScript.
Kesimpulan
Sebuah “ onclick 'peristiwa, ' addEventListener() ' kaedah, atau ' klik() ” kaedah boleh digunakan untuk mensimulasikan klik dengan JavaScript. Sebuah “ onclick acara ” boleh digunakan untuk mensimulasikan klik setiap kali butang diklik dalam bentuk kaunter. ' addEventListener() ” kaedah boleh digunakan untuk melampirkan acara pada pautan dan memberitahu pengguna mengenai simulasi klik. ' klik() ” kaedah boleh digunakan pada butang yang dicipta dan melaksanakan fungsi yang diperlukan untuk setiap butang. Tulisan ini menerangkan cara menggunakan simulasi klik dalam JavaScript.