Untuk jenis acara pengguna, yang paling umum digunakan adalah mouse, keyboard, dan browser.
1. Acara Mouse:
Semua acara mouse sering digunakan. Contoh -contoh berikut digunakan untuk menguji berbagai acara tikus.
Salinan kode adalah sebagai berikut:
<bahasa skrip = "javascript">
fungsi pegangan (oevent) {
var disp = document.geteLementById ("display");
if (window.event) oevent = window.event; // Tangani kompatibilitas dan dapatkan objek
disp.innerhtml + = "Nama acara mouse:" + oevent.type + "<br>";
}
window.onload = function () {
var op = document.getElementById ("box");
op.onmousedown = pegangan;
op.onmouseover = pegangan;
op.onmouseUp = handle;
op.onmouseout = handle;
op.onClick = handle;
op.ondblClick = handle;
}
</script>
<div>
<Div id = "box">
Konten kotak
</div>
<p id = "display"> </p>
</div>
Tes tombol nilai kunci mouse (dengan tabel referensi)
Salinan kode adalah sebagai berikut:
<bahasa skrip = "javascript">
function testClick (oevent) {
var odiv = document.getElementById ("display");
if (window.event)
oevent = window.event;
odiv.innerhtml += oevent.button; // keluarkan nilai tombol
}
document.onmousedown = testClick;
window.onload = testClick; // tes belum menekan tombol apapun
</script>
<div>
<p id = "display"> </p>
</div>
2. Acara keyboard
Tidak banyak jenis acara keyboard, hanya tiga jenis acara.
keydown (tekan tombol, tekan dan tahan akan terus memicu)
Keypress (dipicu ketika tombol ditekan dan karakter dihasilkan, yaitu, mengabaikan kunci fungsi seperti shift, alt, ctrl)
keyup (dipicu saat kunci dilepaskan)
Contoh mendengarkan keyboard:
Salinan kode adalah sebagai berikut:
<bahasa skrip = "javascript">
fungsi pegangan (oevent) {
if (window.event) oevent = window.event; // Tangani kompatibilitas dan dapatkan objek acara
var odiv = document.getElementById ("display");
odiv.innerHtml + = oevent.type + ""; // output nama acara
}
window.onload = function () {
var OtexTarea = document.getElementById ("textin");
Otextarea.onkeydown = pegangan; // Dengarkan semua acara keyboard
Otextarea.onkeyup = handle;
Otextarea.onkeypress = handle;
}
</script>
<div>
<baris textarea = "4" cols = "50" id = "textin">
</textarea>
<p id = "display"> </p>
</div>
Untuk keyboard, yang paling penting bukanlah nama acara, tetapi tombol apa yang ditekan. Karena IE tidak memiliki properti charcode, kode kunci sama dengan kode keycode DOM standar hanya ketika keydown dan peristiwa keyup terjadi.
Dalam acara Keypress, metode berikut digunakan.
Salinan kode adalah sebagai berikut: oevent.charcode = (oevent.type == "keypress")? Oevent.keycode :();
Alasan mengapa kode kunci tidak diadopsi adalah karena itu mewakili kunci keyboard, bukan karakter output. Oleh karena itu, output "a" dan "a", kode kunci setara, dan charcode dibedakan oleh karakter.
Selain itu, di Keypress, nilai kode kunci dari DOM standar selalu 0;
Contoh: Properti Terkait Acara Keyboard:
Salinan kode adalah sebagai berikut:
<bahasa skrip = "javascript">
fungsi pegangan (oevent) {
var odiv = document.getElementById ("display");
if (window.event) oevent = window.event; // Tangani kompatibilitas dan dapatkan objek acara
// Atur nilai IE Charcode
oevent.charcode = (oevent.type == "keypress")? oevent.keycode: 0;
odiv.innerhtml + = oevent.type + ": charcode" + oevent.charcode + "keycode" + oevent.keycode + "<br>"; // tes output
}
window.onload = function () {
var OtexTarea = document.getElementById ("textin");
Otextarea.onkeydown = pegangan; // Dengarkan semua acara keyboard
Otextarea.onkeypress = handle;
}
</script>
<div>
<baris textarea = "4" cols = "50" id = "textin">
</textarea>
<p id = "display"> </p>
</div>
3.HTM Acara
Untuk browser, berbagai acara HTML memiliki acara mereka sendiri, dan beberapa di antaranya sering terpapar oleh pengguna, seperti beban, kesalahan, pilih, dll. Acara HTML yang umum digunakan adalah sebagai berikut:
Acara pemuatan adalah salah satu acara yang umum digunakan, karena kerangka kerja DOM belum dibangun sebelum pemuatan halaman selesai, sehingga tidak ada operasi terkait yang dapat terjadi.
Tetapkan Muat ke Objek Jendela, Acara Upload setara dengan metode Onload dan Onunload yang ditandai oleh <body>.