Cara membuat program front-end web yang efisien adalah masalah yang secara tidak sadar akan saya pertimbangkan setiap kali saya melakukan pengembangan front-end. Beberapa tahun yang lalu, insinyur front-end yang luar biasa di Yahoo menerbitkan sebuah buku tentang meningkatkan kinerja front-end web, yang menyebabkan sensasi di seluruh industri teknologi pengembangan web, membuat pertanyaan optimisasi front-end web misterius pertanyaan kubis di jalan, dan optimasi front-end web telah menjadi pertanyaan sederhana yang dapat dijawab oleh kedua novis maupun raksasa besar. Ketika seluruh industri mengetahui jawaban untuk rahasia yang mengejutkan, teknologi optimasi yang ada tidak lagi dapat menghasilkan lompatan kualitatif untuk situs web yang Anda kembangkan. Untuk membuat kinerja situs web yang kami kembangkan lebih baik daripada situs web orang lain, kami perlu berpikir lebih dalam dan memesan keterampilan yang lebih baik.
Sistem acara di JavaScript adalah titik terobosan pertama yang saya pikirkan. Mengapa ini sistem acara JavaScript? Kita semua tahu bahwa front-end web berisi tiga teknologi: HTML, CSS dan JavaScript. Jelas bagaimana HTML dan CSS digabungkan: gaya, kelas, ID dan tag HTML. Tidak ada yang perlu dibicarakan, tetapi bagaimana JavaScript masuk ke tengah antara HTML dan CSS dan memungkinkan ketiganya berintegrasi? Akhirnya, saya menemukan bahwa titik masuk ini adalah sistem acara JavaScript. Tidak peduli berapa lama atau kode javascript yang kami tulis, pada akhirnya tercermin dalam HTML dan CSS melalui sistem acara. Oleh karena itu, saya berpikir bahwa karena sistem acara adalah titik masuk untuk integrasi ketiganya, pasti akan ada sejumlah besar operasi acara dalam satu halaman, terutama di halaman web yang semakin kompleks saat ini. Tanpa peristiwa ini, kode JavaScript yang kami tulis dengan cermat hanya dapat digunakan di perpustakaan, dan para pahlawan tidak berguna. Karena ada sejumlah besar fungsi acara di halaman, apakah akan ada masalah yang mempengaruhi efisiensi saat menulis fungsi acara seperti yang biasa kita lakukan? Jawaban yang telah saya pelajari adalah bahwa itu adalah masalah efisiensi nyata, dan itu juga merupakan masalah efisiensi yang serius.
Untuk mengklarifikasi jawaban saya, saya ingin menjelaskan sistem acara JavaScript secara rinci.
Sistem acara adalah titik masuk untuk fusi JavaScript, HTML dan CSS. Poin ini seperti fungsi utama di Java. Semua sihir dimulai di sini. Jadi bagaimana browser menyelesaikan entri ini? Saya telah mempelajari tiga cara, mereka adalah:
Metode 1: Pemrosesan Acara HTML
Pemrosesan acara HTML adalah untuk menulis fungsi acara langsung ke tag HTML. Karena metode penulisan ini digabungkan dengan tag HTML, ini disebut pemrosesan acara HTML. Misalnya, kode berikut:
Salinan kode adalah sebagai berikut:
<input type = "tombol" id = "btn" name = "btn" onclick = "waspada ('klik saya!')"/>
Jika fungsi klik acara rumit, menulis kode seperti ini pasti akan menyebabkan ketidaknyamanan. Oleh karena itu, kami sering menulis fungsi di luar dan OnClick secara langsung memanggil nama fungsi, misalnya:
Salinan kode adalah sebagai berikut:
<input type = "tombol" id = "btn" name = "btn" onclick = "btnclk ()"/>
fungsi btnclk () {
peringatan ("Klik saya!");
}
Metode penulisan di atas adalah metode penulisan yang sangat indah, sehingga banyak orang akan secara tidak sadar menggunakannya saat ini, tetapi banyak orang mungkin tidak tahu bahwa metode penulisan yang terakhir sebenarnya tidak sekuat metode penulisan sebelumnya. Ini juga merupakan masalah yang saya temui ketika mempelajari teknologi naskah pemuatan yang tidak memblokir belum lama ini, karena menurut prinsip optimasi ujung depan, kode JavaScript sering terletak di bagian bawah halaman. Ketika halaman diblokir oleh skrip, fungsi yang dirujuk dalam tag HTML mungkin belum dieksekusi. Pada saat ini, kami mengklik tombol halaman, dan hasilnya akan dilaporkan "Fungsi XXX adalah kesalahan yang tidak ditentukan". Dalam JavaScript, kesalahan seperti itu akan ditangkap dengan mencoba dan menangkap. Oleh karena itu, untuk membuat kode lebih kuat, kami akan memiliki penulisan ulang berikut:
Salinan kode adalah sebagai berikut:
<input type = "tombol" id = "btn" name = "btn" onclick = "coba {btnclk ();} catch (e) {}"/>
Melihat kode di atas bukanlah sesuatu yang dapat dijelaskan oleh orang yang menjijikkan.
Metode 2: Pemrosesan Acara Level DOM0
DOM0 Level Event Processing adalah pemrosesan acara yang didukung oleh semua browser hari ini. Tidak ada masalah kompatibilitas. Melihat kalimat seperti itu akan membuat semua orang yang melakukan front-end web bersemangat. Aturan untuk pemrosesan acara DOM0 adalah: setiap elemen DOM memiliki atribut pemrosesan acara sendiri, yang dapat diberi fungsi, seperti kode berikut:
Salinan kode adalah sebagai berikut:
var btndom = document.geteLementById ("btn");
btndom.onClick = function () {
peringatan ("Klik saya!");
}
Atribut acara yang ditangani oleh Acara Level DOM0 didefinisikan dalam bentuk "ON+Acara Nama", dan seluruh atribut ada dalam huruf kecil. Kita tahu bahwa elemen DOM adalah objek JavaScript dalam kode JavaScript, jadi sangat mudah untuk memahami pemrosesan acara tingkat DOM0 dari perspektif objek JavaScript, misalnya, kode berikut:
Salinan kode adalah sebagai berikut:
btndom.onClick = null;
Kemudian acara klik tombol dibatalkan.
Mari kita lihat kode berikut:
Salinan kode adalah sebagai berikut:
btndom.onClick = function () {
peringatan ("Klik saya!");
}
btndom.onClick = function () {
peringatan ("Klik Me1111!");
}
Fungsi berikutnya akan menimpa fungsi pertama.
Metode 3: Pemrosesan Acara DOM2 dan Pemrosesan Acara IE
Pemrosesan acara DOM2 adalah solusi pemrosesan acara standar, tetapi IE Browser telah mengembangkan serangkaian fungsi dan fungsi mirip dengan pemrosesan acara DOM2, tetapi kodenya berbeda dari itu.
Sebelum menjelaskan metode tiga, saya harus menambahkan beberapa konsep, jika tidak saya tidak akan dapat menjelaskan konotasi metode tiga.
Konsep pertama adalah: aliran acara
Dalam pengembangan halaman, kita sering menghadapi situasi ini. Interval kerja halaman dapat diwakili oleh dokumen di JavaScript. Ada div di halaman. Div setara dengan overlay elemen dokumen. Ada elemen tombol di div. Elemen tombol overlay div, yang juga setara dengan overlay dokumen. Jadi masalahnya adalah, ketika kita mengklik tombol ini, perilaku klik ini sebenarnya tidak hanya terjadi pada tombol. Baik div dan dokumen digunakan untuk operasi klik. Menurut Logic, ketiga elemen ini dapat memicu peristiwa klik. Aliran acara menjelaskan konsep skenario di atas. Aliran acara berarti: Urutan acara yang diterima dari halaman.
Konsep kedua: gelembung acara dan event capture
Gelembung acara adalah solusi yang diusulkan oleh Microsoft untuk menyelesaikan masalah aliran peristiwa, sementara event capture adalah solusi aliran acara yang diusulkan oleh Netscape. Prinsip -prinsip mereka adalah sebagai berikut:
Acara menggelembung dimulai dengan div, diikuti oleh tubuh, dan akhirnya dokumen, dan event capture terbalik, pertama dokumen, diikuti oleh badan, dan akhirnya elemen target div. Sebaliknya, solusi Microsoft lebih manusiawi dan sejalan dengan kebiasaan operasi orang, solusi Netscape sangat canggung. Ini adalah konsekuensi dari perang browser. Netscape lebih lambat dan memecahkan masalah aliran acara dengan mengorbankan kode yang digunakan pengguna.
Microsoft telah merancang sistem acara baru dalam kombinasi dengan acara gelembung, yang umumnya dikenal sebagai pemrosesan acara IE di industri. Metode pemrosesan acara IE seperti yang ditunjukkan dalam kode berikut:
Salinan kode adalah sebagai berikut:
var btndom = document.geteLementById ("btn");
btndom.attachevent ("onClick", function () {
peringatan ("Klik saya!");
});
Tambahkan peristiwa melalui metode lampiran EXCHENT dari elemen DOM di bawah IE. Dibandingkan dengan pemrosesan acara DOM0, metode penambahan peristiwa telah berubah dari atribut ke metode, jadi ketika kita menambahkan peristiwa, kita perlu meneruskan parameter ke dalam metode. Metode AttachmentEvent menerima dua parameter. Parameter pertama adalah jenis acara. Penamaan jenis acara sama dengan penamaan acara dalam pemrosesan acara DOM0. Parameter kedua adalah fungsi acara. Keuntungan menggunakan metode ini adalah jika kita menambahkan acara klik ke elemen yang sama, seperti yang ditunjukkan di bawah ini:
Salinan kode adalah sebagai berikut:
btndom.attachevent ("onClick", function () {
peringatan ("Klik saya!");
});
btndom.attachevent ("onClick", function () {
peringatan ("Klik saya juga!");
});
Jalankan, kedua kotak dialog muncul secara normal, memungkinkan kami untuk menambahkan beberapa peristiwa klik yang berbeda ke elemen DOM. Bagaimana jika kita tidak menginginkan acara? Apa yang harus kita lakukan? Saya memberikan metode detachevent untuk menghapus acara. Daftar parameter sama dengan attachEvent. Jika kami ingin menghapus acara klik tertentu, cukup berikan parameter yang sama dengan acara Tambah, seperti yang ditunjukkan pada kode berikut:
Salinan kode adalah sebagai berikut:
btndom.detachevent ("onClick", function () {
peringatan ("Klik saya juga!");
});
Saat menjalankannya, konsekuensinya sangat serius dan kami bingung. Klik kedua tidak dihapus. Apa yang terjadi? Saya sebutkan sebelumnya bahwa menghapus acara membutuhkan parameter yang lewat seperti menambahkan acara. Namun, dalam fungsi anonim JavaScript, bahkan jika kode dari dua fungsi anonim persis sama, JavaScript akan menggunakan variabel yang berbeda untuk menyimpannya secara internal. Akibatnya, fenomena yang kita lihat tidak dapat menghapus acara klik, jadi kode kita harus ditulis seperti ini:
Salinan kode adalah sebagai berikut:
var ftn = function () {
peringatan ("Klik saya juga!");
};
btndom.attachevent ("onClick", ftn);
btndom.detachevent ("onClick", ftn);
Metode ditambahkan dan metode yang dihapus dengan cara ini menunjuk ke objek yang sama, sehingga acara dihapus dengan sukses. Skenario di sini memberi tahu kita bahwa kita perlu memiliki kebiasaan menulis yang baik untuk kita mendefinisikan operasi secara mandiri, dan tidak menggunakan fungsi anonim sebagai kebiasaan.
Berikutnya adalah pemrosesan acara DOM2, prinsipnya ditunjukkan pada gambar di bawah ini:
DOM2 adalah acara standar. Menggunakan acara DOM2, pengiriman acara dimulai dari metode penangkapan, yaitu, dari dokumen, dan kemudian ke tubuh. Div adalah titik perantara. Ketika acara mencapai titik perantara, acara tersebut berada di tahap target. Setelah acara memasuki tahap target, acara mulai menggelembung dan menangani, dan akhirnya acara berakhir pada dokumen. ; Orang -orang terbiasa mengklasifikasikan tahap target sebagai bagian dari gelembung, terutama karena peristiwa gelembung lebih banyak digunakan dalam pengembangan.
Pemrosesan acara DOM2 sangat sulit. Ketika setiap peristiwa dipicu, semua elemen akan dilalui dua kali. Dibandingkan dengan acara IE, kinerjanya jauh lebih buruk daripada acara IE. Saya hanya menggelegak, jadi saya hanya perlu melintasi sekali. Namun, lebih sedikit traversal tidak berarti bahwa sistem acara IE lebih efisien. Mendukung dua sistem acara pada saat yang sama akan membawa fleksibilitas yang lebih besar untuk pengembangan kami dari perspektif pengembangan dan desain. Dari perspektif ini, acara DOM2 masih sangat diinginkan. Kode untuk acara DOM2 adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var btndom = document.geteLementById ("btn");
btndom.addeventListener ("klik", function () {
peringatan ("Klik saya!");
},PALSU);
var ftn = function () {
peringatan ("Klik saya juga!");
};
btndom.addeventListener ("klik", ftn, false);
Penambahan peristiwa dalam pemrosesan acara DOM2 menggunakan AddEventListener, yang menerima satu parameter lagi daripada pemrosesan acara IE. Dua yang pertama berarti sama dengan dua parameter dari metode pemrosesan acara IE. Satu -satunya perbedaan adalah bahwa awalan pada dihapus pada parameter pertama, dan parameter ketiga adalah nilai boolean. Jika nilainya benar, maka acara tersebut akan diproses dalam mode penangkapan, dengan nilainya salah. Acara ini diproses dalam gelembung. Dengan parameter ketiga, kita dapat memahami mengapa elemen acara harus dijalankan dua kali dalam pemrosesan acara DOM2. Tujuannya adalah untuk kompatibel dengan dua model acara. Namun, harap dicatat di sini bahwa tidak peduli apakah kami memilih untuk menangkap atau menggelembung, kedua traversal akan dilakukan selamanya. Jika kami memilih satu metode pemrosesan acara, maka tidak ada fungsi pemrosesan acara yang akan dipicu dalam proses pemrosesan acara lainnya. Ini sama dengan prinsip idling mobil dengan gigi netral. Melalui desain metode acara DOM2, kami tahu bahwa acara DOM2 hanya dapat mengeksekusi salah satu dari dua metode pemrosesan acara saat runtime. Tidak mungkin bagi dua sistem aliran acara untuk memprovokasi pada saat yang sama. Oleh karena itu, meskipun elemen ini dilintasi dua kali, fungsi peristiwa tidak dapat diprovokasi dua kali. Perhatikan bahwa maksud saya tidak ada dua kali diprovokasi, yang mengacu pada fungsi acara. Bahkan, kita dapat mensimulasikan situasi di mana dua model aliran acara dieksekusi pada saat yang sama, seperti kode berikut:
Salinan kode adalah sebagai berikut:
btndom.addeventListener ("klik", ftn, true);
btndom.addeventListener ("klik", ftn, false);
Tetapi cara menulis ini adalah pemrosesan multi-peristiwa, yang setara dengan mengklik tombol dua kali.
DOM2 juga menyediakan fungsi untuk menghapus acara. Fungsi ini adalah RemestEventListener, ditulis sebagai berikut:
Salinan kode adalah sebagai berikut:
btndom.removeeventlistener ("klik", ftn, false);
Hal yang sama berlaku untuk acara IE, yaitu, parameter harus konsisten dengan parameter yang menentukan peristiwa tersebut. Namun, saat menggunakan RemestEventListener, parameter ketiga tidak dilewati. Standarnya adalah menghapus acara gelembung, karena standarnya false jika parameter ketiga tidak dilewati. Misalnya:
Salinan kode adalah sebagai berikut:
btndom.addeventListener ("klik", ftn, true);
btndom.removeeventlistener ("klik", ftn);
Jalankan dan temukan bahwa acara itu tidak berhasil dihapus.
Akhirnya, saya ingin mengatakan bahwa penanganan acara DOM2 didukung dengan baik di IE9, termasuk IE9 atau di atas, dan IE8 di bawah ini tidak mendukung acara DOM2.
Mari kita bandingkan tiga metode acara di bawah ini, sebagai berikut:
Perbandingan 1: Perbandingan satu metode untuk satu sisi dan dua metode lainnya
Cara menulis metode satu adalah dengan menggabungkan HTML dan JavaScript. Anda memiliki saya dan saya memiliki Anda. Memperdalam metode ini untuk mencapai perkembangan campuran HTML dan JavaScript. Dalam istilah perangkat lunak, ini adalah kopling kode. Kode kopling tidak baik, dan itu sangat buruk. Ini adalah tingkat programmer pemula, jadi begitu metode ini benar -benar dikalahkan, dua metode lainnya akan menang.
Perbandingan 2: Metode 2 dan Metode 3
Keduanya ditulis dengan cara yang sama. Terkadang sangat sulit untuk mengatakan siapa yang lebih baik atau lebih buruk. Melihat konten di atas, kami menemukan bahwa perbedaan terbesar antara Mode 2 dan Mode 3 adalah bahwa hanya ada satu peristiwa dalam elemen DOM, dan hanya sekali, sementara Mode 3 dapat memungkinkan suatu peristiwa dalam elemen DOM memiliki beberapa fungsi penanganan acara. Dalam pemrosesan acara DOM2, Mode 3 juga dapat memungkinkan kami untuk mengontrol metode aliran peristiwa secara akurat. Oleh karena itu, fungsi Mode 3 lebih kuat dari Mode 2, jadi dibandingkan dengan Mode 3, itu sedikit lebih baik.
Berikut ini adalah fokus artikel ini: Masalah kinerja sistem acara. Untuk menyelesaikan masalah kinerja, seseorang harus menemukan fokus. Di sini saya akan memikirkan masalah kinerja sistem peristiwa dari dua titik fokus, yaitu: mengurangi jumlah traversal dan konsumsi memori.
Pertama -tama, jumlah traversal. Apakah itu menangkap aliran peristiwa atau aliran peristiwa yang menggelegak, mereka akan melintasi elemen, tetapi mereka semua akan traversal mulai dari jendela atau dokumen atas. Jika elemen DOM dari halaman ini memiliki hubungan orangtua-anak yang mendalam, maka semakin banyak elemen yang Anda lintasi, semakin berbahaya, seperti pemrosesan acara DOM2, semakin besar traversal. Bagaimana cara memecahkan masalah traversal aliran acara ini? Jawaban saya adalah tidak. Beberapa teman di sini mungkin memiliki pertanyaan, kenapa tidak ada lagi? Ada objek acara dalam sistem acara, yang merupakan acara. Objek ini memiliki metode untuk mencegah peristiwa menggelegak atau menangkap. Mengapa saya mengatakan bahwa tidak ada seorang pun? Pertanyaan teman ini masuk akal, tetapi jika kita ingin menggunakan metode ini untuk mengurangi traversal, maka kode kita akan berurusan dengan hubungan antara elemen ayah dan anak dan hubungan elemen kakek. Jika elemen halaman banyak bersarang, ini adalah tugas yang tidak dapat diselesaikan, jadi jawaban saya adalah bahwa masalah traversal tidak dapat diubah, dan kami hanya dapat beradaptasi dengannya.
Tampaknya mengurangi traversal tidak dapat menyelesaikan masalah kinerja sistem acara, jadi sekarang kita hanya dapat mempertimbangkan konsumsi memori. Saya sering mendengar orang mengatakan bahwa C# sangat berguna, tetapi bahkan lebih baik untuk pengembangan front-end web. Kita dapat secara langsung menyeret tombol ke halaman di C# IDE. Setelah tombol mencapai halaman, kode JavaScript akan secara otomatis menambahkan acara ke tombol. Tentu saja, fungsi acara di dalamnya adalah fungsi kosong. Jadi saya pikir kita bisa menempatkan 100 tombol di halaman dengan cara ini. Jika satu kode tidak berfungsi, akan ada pemrosesan 100 acara tombol, yang sangat nyaman. Akhirnya, kami menambahkan acara tombol tertentu ke salah satu tombol untuk membuat halaman dijalankan. Apakah halaman ini efisien? Dalam JavaScript, setiap fungsi adalah objek, dan setiap objek mengkonsumsi memori, jadi kode fungsi acara 99 yang tidak berguna ini harus mengkonsumsi banyak memori browser yang berharga. Tentu saja, kami tidak akan melakukan ini di lingkungan pengembangan nyata, tetapi di era Ajax populer dan pengembangan halaman tunggal saat ini gila dan populer, ada begitu banyak acara di halaman web, yang berarti bahwa setiap acara memiliki fungsi acara, tetapi setiap operasi yang kami hanya memicu satu acara. Pada saat ini, peristiwa lain sedang tidur saat berbaring, yang tidak memainkan peran apa pun dan mengkonsumsi memori komputer.
Kami membutuhkan solusi untuk mengubah situasi ini, dan memang ada solusi seperti itu dalam kenyataan. Untuk menggambarkan rencana ini dengan jelas, saya ingin menambahkan beberapa pengetahuan latar belakang terlebih dahulu. Dalam diskusi pemrosesan acara DOM2, saya menyebutkan konsep objek target. Mengesampingkan metode pemrosesan acara DOM2, ada juga konsep objek target dalam pemrosesan acara Capture dan pemrosesan acara gelembung. Objek target adalah elemen DOM dari operasi spesifik acara tersebut. Misalnya, tombol dalam operasi tombol klik adalah objek target. Tidak peduli metode pemrosesan acara mana, fungsi peristiwa akan berisi objek acara. Objek peristiwa memiliki target atribut, target selalu menunjuk ke objek target, dan objek peristiwa memiliki atribut lain, CurrentTarget, yang menunjuk ke elemen DOM yang mengalir ke event capture atau gelembung. Dari deskripsi di atas, kita tahu apakah itu acara penangkapan atau acara gelembung, aliran acara akan mengalir ke dokumen. Jika kami menambahkan acara klik pada dokumen dan tombol pada halaman tidak menambahkan acara klik, maka kami mengklik tombol dan kami tahu bahwa acara klik pada dokumen akan memicu. Ada detail di sini bahwa ketika acara klik dokumen dipicu, target target acara adalah tombol daripada dokumen, sehingga kita dapat menulis kode seperti ini:
Salinan kode adalah sebagai berikut:
<input type = "tombol" id = "btn" name = "btn" value = "tombol"/>
<a href = "#" id = "aa"> aa </a>
document.addeventListener ("klik", function (evt) {
var target = evt.target;
sakelar (target.id) {
kasus "btn":
peringatan ("tombol");
merusak;
Kasus "AA":
peringatan ("a");
merusak;
}
},PALSU);
Menjalankannya, kami menemukan bahwa efeknya sama dengan peristiwa yang kami tulis tombol secara terpisah. Tetapi manfaatnya terbukti dengan sendirinya. Satu fungsi menangani fungsi acara dari seluruh halaman, dan tidak ada fungsi acara yang idle, yang sempurna. Rencana ini juga memiliki nama profesional: delegasi acara. Metode delegasi JQuery dilakukan sesuai dengan prinsip ini. Faktanya, efisiensi delegasi acara tidak hanya tercermin dalam pengurangan fungsi acara, tetapi juga mengurangi operasi traversal DOM. Misalnya, dalam contoh di atas, kami menambahkan fungsi pada dokumen. Dokumen ini adalah objek tingkat atas pada halaman, dan efisiensi membacanya sangat tinggi. Ketika datang ke peristiwa objek tertentu, kami tidak menggunakan operasi DOM tetapi menggunakan atribut target dari objek acara. Semua ini hanya dapat diringkas dalam satu kalimat: sangat cepat, tidak ada alasan untuk cepat.
Delegasi acara juga dapat memberi kami produk sampingan yang hebat. Teman -teman yang telah menggunakan jQuery seharusnya menggunakan metode langsung. Fitur dari metode langsung adalah Anda dapat menambahkan operasi acara ke elemen halaman. Bahkan jika elemen ini tidak ada di halaman saat ini, Anda dapat menambahkan acaranya. Setelah memahami mekanisme delegasi acara, prinsip hidup mudah dimengerti. Faktanya, JQuery's Live dilakukan melalui delegasi acara, dan Live juga merupakan cara yang efisien untuk menambahkan acara.
Setelah memahami delegasi acara, kami akan menemukan bahwa metode BIND JQuery adalah metode yang tidak efisien. Karena menggunakan metode definisi acara asli, kita harus menggunakan ikatan dengan hati -hati. Bahkan, pengembang jQuery juga memperhatikan masalah ini. Versi baru jQuery memiliki metode on. Metode ON berisi semua fungsi metode Bind, Live dan Delegate. Jadi saya menyarankan agar teman -teman yang telah membaca artikel ini harus meninggalkan metode sebelumnya untuk menambahkan acara dan menggunakan fungsi untuk menambahkan acara.
Delegasi acara memiliki keuntungan lain. Dalam contoh delegasi acara dalam artikel di atas, saya menambahkan acara ke dokumen. Di sini saya ingin membuat perbandingan. Di jQuery, kami terbiasa menempatkan definisi peristiwa elemen dom dalam metode siap, seperti yang ditunjukkan di bawah ini:
Salinan kode adalah sebagai berikut:
$ (dokumen) .ready (function () {
Xxx.bind ("klik", fungsi () {});
});
Fungsi siap dijalankan setelah dokumen DOM halaman dimuat. Ini dieksekusi terlebih dahulu dari fungsi Onload. Ini memiliki banyak manfaat sebelumnya. Salah satu manfaatnya juga untuk meningkatkan kinerja. Definisi acara seperti jQuery juga merupakan praktik standar. Saya percaya beberapa teman harus mengikat peristiwa tertentu di luar Ready, dan akhirnya menemukan bahwa tombolnya akan tidak valid. Skenario tidak valid ini terkadang membutuhkan waktu sejenak, dan akan baik -baik saja setelah beberapa saat. Oleh karena itu, kita sering mengabaikan prinsip masalah ini dan tidak mengikat peristiwa dalam fungsi siap. Operasi ini sebenarnya adalah peristiwa yang mengikat sebelum DOM dimuat, dan dalam periode waktu ini, kami sebenarnya mengikat peristiwa dengan mereka. , Sangat mungkin bahwa beberapa elemen belum dibangun di halaman, jadi pengikatan acara akan tidak valid. Oleh karena itu, alasan siap untuk mendefinisikan peristiwa adalah untuk memastikan bahwa semua elemen halaman dimuat untuk mendefinisikan peristiwa elemen DOM setelah dimuat. Namun, masalah dapat dihindari saat menggunakan delegasi acara. Misalnya, mengikat peristiwa pada dokumen, dokumen tersebut mewakili seluruh halaman, jadi ini adalah waktu paling awal untuk memuatnya. Oleh karena itu, sulit untuk mencapai delegasi acara pada dokumen, dan juga sulit untuk menyebabkan browser melaporkan "fungsi XXX tidak ditentukan". Untuk meringkas fitur ini: Kode Delegasi Acara dapat dijalankan pada setiap tahap pemuatan halaman, yang akan memberikan pengembang dengan kebebasan yang lebih besar dalam meningkatkan kinerja halaman web atau meningkatkan efek halaman web.
Oke, artikel ini telah ditulis. Selamat malam.