peristiwa halaman
: Dalam urutan apa halaman HTML dimuat?
Jawaban: Halaman dimuat dari atas ke bawah sesuai urutan penulisan kode.
Masalah yang mungkin terjadi : Jika JavaScript digunakan untuk mengoperasikan elemen DOM sebelum halaman dimuat, kesalahan sintaksis akan terjadi.
Solusi : Peristiwa halaman dapat mengubah waktu eksekusi kode JavaScript.
Peristiwa fokus
Dalam pengembangan web, peristiwa fokus sebagian besar digunakan untuk fungsi validasi formulir dan merupakan salah satu peristiwa yang paling umum digunakan.
Misalnya, mengubah gaya kotak teks ketika kotak teks mendapat fokus, memvalidasi data yang dimasukkan ke dalam kotak teks ketika kotak teks kehilangan fokus, dll.
Agar semua orang lebih memahami cara menggunakan peristiwa fokus, berikut ini adalah demonstrasi untuk memverifikasi apakah nama pengguna dan kata sandi kosong.
Implementasi kode
<!DOCTYPEhtml>
<kepala>
<meta charset="UTF-8">
<title>Pastikan nama pengguna dan kata sandi kosong</title>
<gaya>
badan{latar belakang:#ddd;}
.box{background:#fff;padding:20px 30px;width:400px;margin: 0 auto;text-align:center;}
.btn{width:180px;height:40px;background:#3388ff;border:1px solid #fff;color:#fff;font-size:14px;}
.ipt{lebar:260px;padding:4px 2px;}
.tips{width:440px;height:30px;margin:5px auto;background:#fff;color:red;border:1px solid #ccc;display:none;line-height:30px;padding-left:20px;font- ukuran:13 piksel;}
</gaya>
</kepala>
<tubuh>
<p id="tips" kelas="tips"></p>
<p kelas="kotak">
<p><label>Nama pengguna: <input id="user" class="ipt" type="text"></label></p>
<p><label>Sandi: <input id="pass" class="ipt" type="password"></label></p>
<p><button id="login" class="btn">Masuk</button></p>
</p>
<skrip>
jendela.onload = fungsi() {
addBlur($('user')); // Periksa apakah nilainya kosong setelah elemen dengan id pengguna kehilangan fokus. addBlur($('pass')); id pass kehilangan fokus. Apakah nilainya kosong};
function $(obj) { // Dapatkan elemen yang ditentukan berdasarkan id return document.getElementById(obj);
}
function addBlur(obj) { // Menambahkan kejadian kehilangan fokus untuk elemen tertentu obj.onblur = function() {
isEmpty(ini);
};
}
function isEmpty(obj) { // Periksa apakah formulir kosong if (obj.value === '') {
$('tips').style.display = 'blok';
$('tips').innerHTML = 'Catatan: Konten yang dimasukkan tidak boleh kosong!';
} kalau tidak {
$('tips').style.display = 'tidak ada';
}
}
</skrip>
</tubuh>
</html> Peristiwa mouse
Peristiwa mouse adalah peristiwa yang paling umum digunakan dalam pengembangan Web.
Misalnya, mengalihkan konten yang ditampilkan di bilah Tab saat mouse digeser; menggunakan mouse untuk menyeret kotak status untuk menyesuaikan posisi tampilannya, dll. Semua efek halaman web umum ini menggunakan peristiwa mouse.
Dalam pengembangan proyek, beberapa atribut mouse yang umum digunakan sering kali dilibatkan, yang digunakan untuk memperoleh informasi posisi mouse saat ini.
Atribut pageX dan pageY tidak kompatibel di browser IE6-8. Oleh karena itu, kompatibilitas dengan browser IE6~8 diperlukan selama pengembangan proyek.
Koordinat mouse dalam dokumen sama dengan koordinat mouse di jendela saat ini ditambah panjang teks yang digulung oleh scroll bar.
Agar semua orang lebih memahami penggunaan peristiwa mouse, mari kita ambil tampilan melingkar dari posisi klik mouse sebagai contoh.
Implementasi kode
<!DOCTYPEhtml>
<kepala>
<meta charset="UTF-8">
<title>Tampilkan posisi klik mouse</title>
<gaya>
.mouse{position:absolute;background:#ffd965;width:40px;height:40px;border-radius:20px;}
</gaya>
</kepala>
<tubuh>
<p id="mouse" kelas="mouse"></p>
<skrip>
var mouse = dokumen.getElementById('mouse');
//Persyaratan: Saat mouse mengklik halaman, dapatkan posisi klik dan tampilkan titik kecil document.onclick = function(event) {
// Dapatkan pemrosesan yang kompatibel dari objek acara var event = event ||.
// Posisi mouse pada halaman var pageX = event.pageX ||.event.clientX + document.documentElement.scrollLeft;
var halamanY = acara.halamanY ||. acara.klienY + dokumen.documentElement.scrollTop;
// Hitung posisi dimana <p> harus ditampilkan var targetX = pageX - mouse.offsetWidth / 2;
var targetY = halamanY - mouse.offsetHeight / 2;
// Menampilkan <p> pada lokasi yang diklik mouse
mouse.style.display = 'blok';
mouse.style.left = targetX + 'px';
mouse.style.top = targetY + 'px';
};
</skrip>
</tubuh>
</html> [Kasus] Efek seret mouse
Posisi kotak (nilai kiri dan atas) = posisi mouse (nilai kiri dan atas) - jarak antara mouse dan kotak (nilai kiri dan atas) saat mouse ditekan.
Berikan sebuah contoh
Ide penerapan kode :
① Tulis HTML dan desain kotak pop-up untuk menerapkan efek drag-and-drop.
② Tambahkan event mousedown dan pengendalinya ke drag bar.
③ Menangani peristiwa pergerakan mouse untuk mencapai efek menyeret mouse.
④ Menangani peristiwa pelepasan tombol mouse sehingga kotak pop-up tidak lagi bergerak setelah tombol mouse dilepaskan.
Implementasi kode
<!DOCTYPEhtml>
<html>
<kepala>
<meta charset="UTF-8">
<title>Seret mouse</title>
<gaya>
isi{margin:0}
.box{width:400px;height:300px;border:5px solid #eee;box-shadow:2px 2px 2px 2px #666;position:absolute;top:30%;kiri:30%}
.hd{width:100%;height:25px;background-color:#7c9299;border-bottom:1px solid #369;line-height:25px;color:#fff;cursor:move}
#box_close{float:kanan;kursor:pointer}
</gaya>
</kepala>
<tubuh>
<p id="kotak" kelas="kotak">
<p id="jatuhkan" kelas="hd">
Informasi pendaftaran (dapat diseret dan dijatuhkan)
<span id="box_close">[Tutup]</span>
</p>
<p kelas="bd"></p>
</p>
<skrip>
// Ambil kotak yang diseret dan tarik strip var box = document.getElementById('box');
var drop = document.getElementById('drop');
drop.onmousedown = function(event) {// Tekan mouse pada drag bar untuk menyeret kotak var event = event || window.event;
// Mendapatkan posisi ketika mouse ditekan var pageX = event.pageX ||.event.clientX + document.documentElement.scrollLeft;
var halamanY = acara.halamanY ||. acara.klienY + dokumen.documentElement.scrollTop;
// Hitung posisi posisi klik mouse dari kotak var spaceX = pageX - box.offsetLeft;
var spaceY = halamanY - box.offsetTop;
document.onmousemove = function(event) {//Mendapatkan posisi mouse saat mouse bergerak. Seluruh kotak mengikuti posisi mouse var event = event ||.
// Dapatkan posisi mouse setelah gerakan var pageX = event.pageX ||.event.clientX + document.documentElement.scrollLeft;
var halamanY = acara.halamanY ||. acara.klienY + dokumen.documentElement.scrollTop;
// Hitung dan atur posisi kotak setelah pergerakan box.style.left = pageX - spaceX + 'px';
box.style.top = halamanY - spasiY + 'px';
};
};
document.onmouseup = function() {//Membatalkan pergerakan kotak ketika tombol mouse dilepaskan document.onmousemove = null;
};
</skrip>
</tubuh>
</html> Peristiwa keyboard
Peristiwa keyboard mengacu pada peristiwa yang dipicu saat pengguna menggunakan keyboard.
Misalnya, pengguna menekan tombol Esc untuk menutup bilah status yang terbuka, dan menekan tombol Enter untuk langsung mengalihkan kursor ke atas dan ke bawah, dll.
Berikut ini menunjukkan penggunaan peralihan tombol Enter. Detailnya seperti yang ditunjukkan pada contoh.
Implementasi kode
<!DOCTYPEhtml>
<kepala>
<meta charset="UTF-8">
<title>Tekan Enter untuk beralih</title>
</kepala>
<tubuh>
<p>Nama pengguna: <input type="text"></p>
<p>Email: <input type="text"></p>
<p>Nomor ponsel: <input type="text"></p>
<p>Deskripsi pribadi: <input type="text"></p>
<skrip>
var inputs = dokumen.getElementsByTagName('input');
for (var i = 0; i < input.panjang; ++i) {
masukan[i].onkeydown = fungsi(e) {
// Dapatkan pemrosesan yang kompatibel dari objek acara var e = event ||.
// Tentukan apakah tombol yang ditekan adalah Enter. Jika demikian, biarkan input berikutnya menjadi fokus jika (e.keyCode === 13) {
// Telusuri semua kotak masukan dan temukan subskrip masukan saat ini untuk (var i = 0; i < inputs.length; ++i) {
if (masukan[i] === ini) {
// Hitung indeks elemen input berikutnya var indeks = i + 1 >= inputs.length 0 : i + 1;
merusak;
}
}
// Jika input berikutnya masih berupa kotak teks, fokuskan keyboard if (inputs[index].type === 'text') {
inputs[index].focus(); // Memicu kejadian fokus }
}
};
}
</skrip>
</tubuh>
</html> Perhatikan bahwa
nilai kunci yang disimpan dalam peristiwa penekanan tombol adalah kode ASCII, dan
nilai kunci yang disimpan dalam peristiwa keydown dan keyup adalah kode kunci virtual.
Untuk detailnya, silakan merujuk ke manual seperti MDN.
Peristiwa formulirperistiwa formulir
mengacu pada peristiwa yang terjadi saat mengoperasikan formulir web.
Misalnya verifikasi formulir sebelum penyerahan, operasi konfirmasi saat formulir direset, dll. JavaScript menyediakan acara formulir terkait.
Berikut ini menunjukkan apakah akan mengirimkan dan mereset data formulir sebagai contoh. Detailnya seperti yang ditunjukkan pada contoh.
Implementasi kode
<!DOCTYPEhtml>
<kepala>
<meta charset="UTF-8">
<title>Formulir acara</title>
</kepala>
<tubuh>
<formulir id="daftar">
<label>Nama pengguna: <input id="pengguna" type="teks"></label>
<input type="kirim" value="Kirim">
<input type="reset" value="Reset">
</bentuk>
<skrip>
// Mendapatkan objek form dan elemen yang perlu diverifikasi var regist = document.getElementById('register');
var pengguna = document.getElementById('pengguna');
regist.onsubmit = function(event) { // Tambahkan event kirim ke formulir // Dapatkan objek event dan output event saat ini ketik var event = event || window.event;
console.log(event.type);
// Tentukan apakah konten elemen formulir kosong, kembalikan salah, jika tidak, kembalikan benar
kembalikan nilai pengguna? benar: salah;
};
regist.onreset = function (event) { // Tambahkan event reset ke form // Dapatkan objek event dan output event saat ini ketik var event = event || window.event;
console.log(event.type);
// Tentukan apakah akan mengonfirmasi pengaturan ulang, tekan "OK" untuk mengembalikan nilai benar, tekan "Batal" untuk mengembalikan nilai salah
return konfirmasi('Harap konfirmasi apakah Anda ingin mengatur ulang informasi. Setelah reset, semua isi formulir akan dihapus');
};
</skrip>
</tubuh>
</html> Analisis langsung
efek pembesaran gambar
Cara menerapkan efek pembesaran gambar:
① Siapkan dua gambar identik, gambar kecil dan gambar besar.
② Thumbnail ditampilkan di area tampilan produk.
③ Gambar besar digunakan untuk menampilkan area yang sesuai pada gambar besar secara proporsional saat mouse bergerak pada gambar kecil.
Ide implementasi kode :
① Tulis halaman HTML untuk menampilkan gambar kecil, topeng yang menyembunyikan mouse, dan gambar besar.
② Saat mouse bergerak pada gambar kecil, mask mouse dan gambar besar akan ditampilkan.
③ Saat mouse bergerak, biarkan topeng bergerak pada gambar kecil.
④ Batasi jangkauan pergerakan masker pada gambar kecil.
⑤ Menampilkan gambar besar secara proporsional berdasarkan cakupan masker pada gambar kecil.