Kemahiran analisis_javascript penggunaan delegasi acara JavaScript

Contoh dalam artikel ini menerangkan penggunaan delegasi acara JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

1 Klik mana-mana bahagian halaman untuk mencetuskan acara

Buat fail script1.js.

Salin kod Kod adalah seperti berikut:

(function() {
EventUtility.addEvent(dokumen, "klik", fungsi(evt) {
makluman('hello');
});
}());

Bahagian halaman.

Salin kod Kod adalah seperti berikut:

 

Hasil keluaran: Mengklik di mana-mana pada halaman akan muncul kotak.

Walau bagaimanapun, kadangkala kami ingin mengklik pada elemen dalam dokumen untuk mencetuskan peristiwa.

2. Gunakan delegasi untuk mencetuskan acara

Tambahkan teg pada halaman.

Salin kod Kod adalah seperti berikut:

 

                                                                                                                                                                                                                                     

Ubah suai skrip1.js kepada:

Salin kod Kod adalah seperti berikut:

(function() {

EventUtility.addEvent(dokumen, "klik", fungsi(evt) {
//Dapatkan objek klik
        var target = eventUtility.getTarget(evt);
//Dapatkan nama tag bagi objek yang diklik
        var tagName = target.tagName;
//Jika teg ialah
Jika (tagName === "A") {
makluman("klik saya");
//Tingkah laku lalai menyekat pautan
              eventUtility.preventDefault(evt);
}
});
}());

Hasil keluaran: Hanya apabila teg pada halaman diklik akan muncul kotak.
Kelebihan di atas ialah: tidak kira berapa banyak elemen teg yang ditambahkan pada dokumen, semua teg mempunyai keupayaan untuk dicetuskan. Pendekatan seperti ini ialah delegasi acara. Kami ingin mendaftarkan acara untuk elemen kanak-kanak, tetapi mula-mula mendaftarkan acara itu pada elemen induk elemen kanak-kanak Dengan cara ini, sebarang elemen yang ditambah secara dinamik daripada jenis yang sama dengan elemen anak dalam elemen induk didaftarkan untuk acara tersebut.

Jika kami mendaftarkan acara kepada sub-elemen, dan kemudian menambahkan unsur-unsur jenis yang sama secara dinamik seperti sub-elemen dalam dokumen, kami mesti mendaftarkan acara untuk sub-elemen yang baru ditambah secara dinamik ini.

Selain itu, delegasi acara menggunakan "event bubbling" dengan baik. Apabila elemen kanak-kanak diklik, mengikut "acara menggelegak", elemen induk elemen kanak-kanak menangkap peristiwa klik dan mencetuskan kaedahnya sendiri.

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.