Penjelasan terperinci tentang acara UI dalam kemahiran JavaScript type_javascript

"Acara tahap DOM 3" menetapkan beberapa jenis acara

Acara UI, dibahagikan apabila pengguna berinteraksi dengan elemen pada halaman; Fokus acara, elemen mendapat atau kehilangan fokus; Acara tetikus, lakukan operasi pada halaman melalui tetikus
Acara roda tatal, menggunakan roda tetikus atau peranti serupa; Peristiwa teks, apabila pengguna memasukkan teks dalam dokumen
Acara papan kekunci, lakukan operasi pada halaman melalui papan kekunci
Acara sintetik, pembahagian apabila aksara dimasukkan untuk IME (Editor Kaedah Input); Peristiwa perubahan (mutasi), struktur DOM yang mendasari berubah
Tukar acara nama, apabila nama elemen atau atribut berubah, acara jenis ini telah ditamatkan.
Perkara berikut memfokuskan pada kandungan acara UI

Acara UI merujuk kepada acara yang tidak semestinya berkaitan dengan operasi pengguna.

DOMActivate，元素已经被用户操作（鼠标或键盘）激活。已经被废弃。
load，页面完全加载完后在window上触发，所有框架加载完毕后在框架集上触发，图像加载完毕在img元素上触发，当嵌入内容加载完毕在object元素上触发。
unload，页面完全卸载（window），所有框架都卸载后（框架集），嵌入内容卸载完毕后（object）。
abort，当用户停止下载过程，如果嵌入内容没有加载完，则在object元素上除法。
error，当js错误时（window），当无法加载图像时（img），当无法加载嵌入内容时（object），当一或多个框架无法加载（框架集）。
select，当用户选择文本框（texterea或input）中的一个或多个字符时触发。
resize：当窗口或框架的大小变化时（window或框架）
scroll：当用户滚动带滚动条的元素中的内容时（在该元素上触发）

muat acara

Salah satu acara yang paling biasa digunakan dalam js ialah memuatkan Apabila halaman dimuatkan sepenuhnya (semua imej, fail js, fail css, dll.), peristiwa pemuatan pada tetingkap akan dicetuskan. Seperti:

Secara umumnya, sebarang peristiwa yang berlaku pada tetingkap boleh ditentukan melalui ciri yang sepadan dalam elemen badan, kerana elemen tetingkap tidak boleh diakses dalam HTML. Ini hanyalah langkah berhenti untuk memastikan keserasian ke belakang. Seperti:

window.onload = function () {
  console.log('loaded');
}

Juga boleh digunakan pada elemen imej:

document.body.onload = function () {
  console.log('loaded');
}

Contoh lain ialah kod berikut Selepas tetingkap dimuatkan, elemen img ditambahkan pada badan Selepas elemen img dimuatkan, src imej dan mesej gesaan digesa:

var img = document.getElementById("img");
img.onload = function () {
  console.log(event.target.src);
}

Selain itu, elemen skrip juga menyokong acara pemuatan dalam cara yang tidak standard.

window.onload = function () {
  var image = document.createElement("img");
  document.body.appendChild(image);
  image.src = "scr.png"
  image.onload = function () {
    console.log(event.target.src);
    console.log('img is loaded');
  };
}

Sesetengah penyemak imbas turut menyokong acara pemuatan pada elemen pautan supaya pembangun boleh menentukan sama ada helaian gaya telah dimuatkan.

memuat acara

Acara ini dicetuskan selepas dokumen telah dipunggah sepenuhnya. Acara pemunggahan berlaku apabila pengguna beralih dari satu halaman ke halaman yang lain.

Berhati-hati harus diambil semasa menulis kod dalam pengendali acara onunload, kerana objek yang wujud selepas halaman dimuatkan mungkin tidak wujud pada masa ini.

window.onunload = function () {
  alert("8888");
}

ubah saiz acara

Acara ini dicetuskan apabila tetingkap penyemak imbas diubah saiz kepada ketinggian atau lebar baharu.

Oleh kerana sesetengah penyemak imbas mencetuskan peristiwa ini apabila tetingkap berubah sebanyak 1 piksel, dan terus mencetuskan apabila tetingkap berubah pelayar lain hanya akan mencetuskan apabila pengguna berhenti mengubah saiz tetingkap. Oleh itu, anda harus mengelak daripada menambahkan banyak kod pengiraan kepada pengendali acara ini untuk mengelakkan penyemak imbas daripada memperlahankan responsnya.

window.onresize = function () {
  console.log(document.body.clientWidth);
}

acara tatal

Walaupun peristiwa ini berlaku pada objek tetingkap, ia sebenarnya mewakili perubahan dalam elemen respons pada halaman. Dalam mod campuran, perubahan dipantau melalui scrollLeft dan scrollTop elemen badan dalam mod bukan standard, semua penyemak imbas kecuali Safari akan mencerminkan perubahan ini melalui elemen html (documentElement):

Oleh kerana penyemak imbas sentiasa dicetuskan dengan perubahan, anda harus mengelak daripada menambahkan banyak kod pengiraan kepada pengendali acara ini untuk mengelakkan melambatkan tindak balas penyemak imbas.

window.onscroll = function () {
  console.log(document.documentElement.scrollTop || document.body.scrollTop);
}

batalkan acara

Sila beri perhatian kepada kemas kini seterusnya tentang pengguguran, ralat, pilihan dan acara lain

acara ralat

Sila beri perhatian kepada kemas kini seterusnya tentang pengguguran, ralat, pilihan dan acara lain

pilih acara

Sila beri perhatian kepada kemas kini seterusnya tentang pengguguran, ralat, pilihan dan acara lain