Dalam pengembangan aplikasi sebenarnya, kita sering menggunakan event modul JS, namun terkadang kita menemui beberapa masalah, seperti event klik. Contoh sederhananya, klik tombol "Kirim" di luar formulir untuk mengirimkan formulir. Ayo membuat kode.
HTML:
Copy kode kodenya sebagai berikut:
<h3> Silakan klik "Kirim", dan peristiwa klik pada tombol kirim tes juga terpicu. </h3>
<button id="btn">Kirim</button>
<formulir tindakan="#" metode="dapatkan" id="form">
<input type="text" name="site" value="www.woiweb.net" readonly/>
<input id="subbtn" type="submit" value="Jangan klik tombol ini untuk mengirimkan dulu" onclick="alert('Saya sudah mengirimkan');"/>
</bentuk>
skrip java:
Copy kode kodenya sebagai berikut:
<skrip tipe="teks/javascript">
var sub = dokumen.getElementById("subbtn");
var btn = dokumen.getElementById("btn");
//metode umum
btn.onclick = fungsi() {
sub.klik();
}
</skrip>
Setelah dilakukan pengujian, tidak ada masalah pada IE, FF, Chrome, Opera, dan Safari, dan formulir dapat dikirimkan dengan normal.
Namun dalam desain sebenarnya, untuk membuat tombol kirim terlihat lebih baik, pembuat sering menggunakan tag untuk memprosesnya dan menambahkan gambar latar belakang untuk menyimulasikan tombol tersebut. Kami masih menggunakan ide di atas untuk mencoba dan menambahkan tag agar dapat dikirimkan .Formnya, kita hanya memodifikasi htmlnya saja.
HTML:
Copy kode kodenya sebagai berikut:
<h3> Silakan klik "Kirim", dan peristiwa klik pada tombol kirim tes juga terpicu. </h3>
<button id="btn">Kirim</button>
<formulir tindakan="#" metode="dapatkan" id="form">
<input type="text" name="site" value="www.woiweb.net" readonly/>
<!--<input id="subbtn" type="submit" value="Jangan klik tombol ini untuk mengirimkan dulu" onclick="alert('Saya sudah mengirimkan');"/> -->
<a id="subbtn" href="javascript:;" onclick="alert('Panggil metode untuk mengirimkan formulir di sini')">Simulasikan tombol kirim</a>
</bentuk>
skrip java:
Copy kode kodenya sebagai berikut:
<skrip tipe="teks/javascript">
var sub = dokumen.getElementById("subbtn");
var btn = dokumen.getElementById("btn");
//metode umum
btn.onclick = fungsi() {
sub.klik();
}
</skrip>
Setelah dijalankan, terjadi masalah. IE, FF, dan Opera semuanya baik-baik saja, tetapi Chrome dan Safari tidak dapat berjalan secara normal. Kemudian, saya mencari secara online dan menemukan bahwa label a tidak memiliki acara onclick() yang sama dengan tombolnya. Solusinya untuk IE dan FF tulis logikanya berbeda, kode JSnya sebagai berikut:
javascript:
Copy kode kodenya sebagai berikut:
<skrip tipe="teks/javascript">
var sub = dokumen.getElementById("subbtn");
var btn = dokumen.getElementById("btn");
//metode umum
btn.onclick = fungsi() {
//sub.klik();
if (/msie/i.test(navigator.userAgent)) //IE
{
sub.fireEvent("onclick");
} kalau tidak {
var e = dokumen.createEvent('MouseEvent');
e.initEvent('klik', salah, salah);
sub.dispatchEvent(e);
}
}
</skrip>
Pada titik ini, masalahnya telah terpecahkan. Meskipun masalah ini sangat sederhana, namun mudah diabaikan oleh semua orang. Saya mempostingnya untuk dibagikan kepada semua orang.
tata bahasa:
buat Acara (Jenis acara)
Deskripsi parameter
eventType adalah nama modul event dari objek Event yang ingin Anda peroleh. Lihat bagian Deskripsi untuk daftar jenis peristiwa yang valid.
nilai kembalian
Mengembalikan objek Acara yang baru dibuat dari tipe tertentu.
Melemparkan
Jika implementasi mendukung jenis kejadian yang diperlukan, metode ini akan memunculkan DOMException dengan kode NOT_SUPPORTED_ERR.
menjelaskan
Metode ini membuat tipe peristiwa baru yang ditentukan oleh parameter eventType. Perhatikan bahwa nilai parameter ini bukanlah nama antarmuka peristiwa yang akan dibuat, tetapi nama modul DOM yang mendefinisikan antarmuka tersebut.
Tabel berikut mencantumkan nilai legal untuk eventType dan antarmuka acara yang dibuat oleh setiap nilai:
Metode inisialisasi antarmuka peristiwa parameter
HTMLEvent HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()
Setelah membuat objek Event menggunakan metode ini, objek tersebut harus diinisialisasi menggunakan metode inisialisasi yang ditunjukkan pada tabel di atas. Untuk informasi selengkapnya tentang metode inisialisasi, lihat Referensi Objek Peristiwa.
Metode ini sebenarnya tidak ditentukan oleh antarmuka Dokumen, tetapi oleh antarmuka DocumentEvent. Jika implementasi mendukung modul Event, objek Document mengimplementasikan antarmuka DocumentEvent dan mendukung metode ini.