Pengenalan kepada kemahiran JavaScript events_javascript

Acara JavaScript ialah satu siri operasi yang disebabkan oleh pengguna mengakses halaman web;
Sebagai contoh: pengguna mengklik; apabila pengguna melakukan operasi tertentu, satu siri kod dilaksanakan

1 Pengenalan Acara

Peristiwa biasanya digunakan untuk berinteraksi antara penyemak imbas dan operasi pengguna; ia mula-mula muncul dalam IE dan Netscape Navigator sebagai cara berkongsi beban pengiraan sebelah pelayan
Spesifikasi tahap DOM2 mula cuba menyeragamkan acara DOM dengan cara yang logik;
IE9/Firefox/Opera/Safari dan Chrome semuanya telah melaksanakan bahagian teras modul "peristiwa peringkat DOM2"
Penyemak imbas sebelum IE8 masih menggunakan model acara proprietari mereka;
JavaScript mempunyai tiga model acara: model sebaris/model skrip dan model DOM2;

2 model sebaris (pengendali acara HTML)

Model ini ialah cara paling tradisional dan mudah untuk mengendalikan acara;
Dalam model sebaris, pengendali acara ialah atribut teg HTML, digunakan untuk mengendalikan acara tertentu; Walaupun sebaris lebih banyak digunakan pada zaman awal, ia bercampur dengan HTML dan tidak dipisahkan daripada HTML;

Gunakan fungsi pengendali acara sebagai atribut dalam HTML untuk melaksanakan kod JS;

Perhatikan tanda petikan tunggal dan dua kali; Gunakan fungsi pengendalian acara sebagai atribut dalam HTML untuk melaksanakan fungsi JS;
PS: Fungsi tidak boleh diletakkan di dalam window.onload, jika tidak, ia tidak akan kelihatan;

Tiga model skrip (pengendali acara tahap DOM 0)

Empat fungsi pemprosesan acara

//Jenis acara yang JavaScript boleh kendalikan ialah: acara tetikus/acara papan kekunci/acara HTML;
Fungsi pengendalian acara JavaScript dan senarai penggunaannya
Fungsi pengendali acara Elemen yang terjejas Apabila berlaku
imej onabort Apabila pemuatan imej terganggu;
onkabur tetingkap/bingkai/semua objek bentuk apabila fokus beralih daripada objek;
onchange kotak input/kotak pilih/medan teks Apabila menukar nilai elemen dan kehilangan fokus;
pautan onclick/butang/objek bentuk/imej, dsb. Apabila pengguna mengklik objek;
pautan ondblclick/butang/objek bentuk apabila pengguna mengklik dua kali objek;
tetingkap ondragdrop Apabila pengguna menyeret dan menjatuhkan objek ke dalam tetingkap penyemak imbas;
onError tetingkap/bingkai/semua objek bentuk apabila ralat sintaks berlaku dalam skrip;
onfocus tetingkap/bingkai/semua objek bentuk Apabila tetikus diklik atau pergerakan tetikus difokuskan pada tetingkap atau bingkai;
onkeydown dokumen/imej/pautan/borang apabila kekunci ditekan;
onkeypress dokumen/imej/sambungan/borang Apabila kekunci ditekan dan kemudian dilepaskan;
onkeyup dokumen/imej/pautan/borang apabila kunci dilepaskan;
muatkan badan/frameset/imej selepas dokumen atau imej dimuatkan;
onunload body/frameset Selepas dokumen atau frameset dipunggah;
pautan onmouseout Apabila ikon mengalih keluar pautan;
pautan onmouseover Apabila tetikus bergerak ke pautan;
tetingkap onmove Apabila tetingkap penyemak imbas bergerak;
butang set semula borang onset Klik butang set semula borang;
onresize window Apabila menukar saiz tetingkap penyemak imbas;
onselect elemen borang Apabila memilih objek borang;
onsubmit borang Semasa menghantar borang ke pelayan;
// PS: Untuk setiap acara, ia mempunyai julat dan kaedah pencetusnya sendiri, dan pemprosesan acara akan menjadi tidak sah;

1. Peristiwa tetikus boleh dicetuskan oleh semua elemen pada halaman

(1).klik: Dicetuskan apabila pengguna mengklik butang tetikus atau menekan kekunci Enter

​ input.onclick = function(){
alert('Lee');
};

(2).dblclick: Dicetuskan apabila pengguna mengklik dua kali butang tetikus;

​ input.ondblclick = function(){
alert('Lee');
}

(3).turun tetikus: Dicetuskan apabila pengguna menekan tetikus tetapi belum melantunkannya ke atas; ​ input.onmousedown = function(){

alert('Lee');
}

(4)mouseup: dicetuskan apabila pengguna melepaskan butang tetikus;

​ input.onmouseup = function(){

alert('Lee');
}

(5).mouseover: Dicetuskan apabila tetikus bergerak ke atas elemen

​ input.onmouseover = function(){

alert('Lee');
}

(6).mouseout: Dicetuskan apabila tetikus bergerak keluar dari elemen

​ input.onmouseout = function(){

alert('Lee');
}

(7).mousemove: Dicetuskan apabila penunjuk tetikus bergerak pada elemen

​ input.onmousemove = function(){

alert('Lee');
}

2. Acara papan kekunci

(1).keydown: Dicetuskan apabila pengguna menekan mana-mana kekunci pada papan kekunci Jika ditekan dan ditahan, ia akan dicetuskan berulang kali; onkeydown = function(){

alert('Lee');

}

(2).Tekanan kekunci: Dicetuskan apabila pengguna menekan kekunci aksara pada papan kekunci Jika ditekan dan ditahan, ia akan dicetuskan berulang kali; onkeypress = function(){
alert('Lee');

}

(3).keyup: Dicetuskan apabila pengguna melepaskan kekunci pada papan kekunci;
onkeyup = function(){
alert('Lee');

}

3.Acara HTML

(1).muatan: Apabila halaman dimuatkan sepenuhnya (termasuk semua imej/fail JavaScript/fail CSS dan sumber luaran lain), peristiwa pemuatan pada tetingkap akan dicetuskan;
window.onload = function(){ alert('Lee');

}

// Peristiwa pemuatan juga boleh dicetuskan pada imej, sama ada elemen imej dalam DOM atau elemen imej dalam HTML
// Jadi anda boleh menentukan pengendali acara onload untuk mana-mana imej dalam HTML;

// PS: Elemen imej baharu tidak semestinya mula dimuat turun selepas ia ditambahkan pada dokumen Selagi atribut src ditetapkan, muat turun akan bermula;

// Elemen juga akan mencetuskan peristiwa pemuatan supaya pembangun boleh menentukan sama ada fail JavaScript yang dimuatkan secara dinamik telah dimuatkan; // Tidak seperti imej, muat turun fail JavaScript hanya akan bermula selepas atribut src elemen

(2).punggah: Dicetuskan apabila dokumen dipunggah sepenuhnya; // Selagi pengguna beralih dari satu halaman ke halaman yang lain, acara pemunggahan akan berlaku; // Penggunaan acara ini yang paling biasa adalah untuk mengosongkan rujukan untuk mengelakkan kebocoran memori; ​​ Window.ounload = function(){
alert('Lee');
}
(3).select: Dicetuskan apabila pengguna memilih kotak teks (input atau textarea) yang kandungannya berubah dan kehilangan fokus; ​​input.onselect = function(){
alert('Lee');
}
(4).perubahan: Dicetuskan apabila kandungan kotak teks (input atau textarea) berubah dan kehilangan fokus; ​​input.onchange = function(){
alert('Lee');
}
(5).fokus: Dicetuskan pada tetingkap dan elemen berkaitan apabila halaman atau elemen mendapat fokus; ​​input.onfocus = function(){
alert('Lee');
}
(6).kabur: Dicetuskan pada tetingkap dan elemen berkaitan apabila halaman atau elemen kehilangan fokus; ​​input.onblur = function(){
alert('Lee');
}
(7).serahkan: Dicetuskan pada elemen Form.onsubmit = function(){
alert('Lee');
}

(8).set semula: Dicetuskan pada elemen Form.onreset = function(){
alert('Lee');
}

(9).resize: Apabila tetingkap penyemak imbas dilaraskan kepada ketinggian atau lebar baharu, acara ubah saiz akan dicetuskan;
// Peristiwa ini dicetuskan pada tetingkap (tetingkap); memaksimumkan atau meminimumkan tetingkap penyemak imbas juga akan mencetuskan acara ubah saiz; // IE/Safari/Chrome dan Opera akan terus mencetuskan acara ubah saiz apabila penyemak imbas berubah
// Firefox hanya akan mencetuskan acara ubah saiz apabila pengguna berhenti mengubah saiz tetingkap; ​ window.onresize = function(){

alert('Lee');

}

(10).skrol: Dicetuskan apabila pengguna menatal elemen bar skrol
​ window.onscroll = function(){

alert('Lee');

}