Delegasi Acara JavaScript lebih mudah daripada yang anda fikirkan

src = "https://img.php.cpload/article/000/000/000/000/1741623030759003.jpg"

Delegasi acara JavaScript adalah teknik yang meningkatkan prestasi dengan mengurangkan bilangan pengendali acara yang diperlukan. Daripada melampirkan pengendali acara individu ke setiap elemen, satu pengendali acara ditambah kepada elemen induk, mengendalikan acara untuk semua elemen anaknya.

Delegasi acara berfungsi melalui peristiwa yang menggelegak dan elemen sasaran. Apabila peristiwa dicetuskan, ia juga mengaktifkan semua nenek moyang unsur, satu proses yang dikenali sebagai peristiwa yang menggelegak. Elemen sasaran, elemen permulaan peristiwa, disimpan dalam harta benda objek acara, yang membolehkan anda menentukan di mana peristiwa itu berasal.

Walaupun delegasi acara meningkatkan prestasi dan mengurangkan penggunaan memori, tidak semua gelembung peristiwa, dan mengendalikan beberapa peristiwa tetikus berpotensi menjadi hambatan prestasi. Oleh itu, penting untuk menguruskan kod delegasi acara anda dengan teliti untuk mengelakkan isu -isu yang berpotensi ini. Sebenarnya, jika anda sudah tahu bagaimana untuk menambah pengendali acara JavaScript, ia adalah satu snap untuk dilaksanakan. Dalam pengendalian acara tradisional anda menambah atau mengeluarkan pengendali acara dari setiap elemen yang diperlukan. Walau bagaimanapun, pengendali acara berpotensi menyebabkan kebocoran memori dan kemerosotan prestasi - semakin banyak yang anda miliki, semakin besar risiko. Delegasi Acara JavaScript adalah teknik mudah di mana anda menambah satu pengendali acara ke elemen induk untuk mengelakkan untuk menambah pengendali acara kepada beberapa elemen kanak -kanak.

Bagaimana ia berfungsi? Apabila peristiwa dicetuskan pada elemen, contohnya tetikus klik pada butang, peristiwa yang sama juga dicetuskan pada semua nenek moyang unsur itu. Proses ini dikenali sebagai peristiwa yang menggelegak; Acara itu gelembung dari elemen yang berasal ke bahagian atas pokok Dom. Elemen sasaran mana -mana peristiwa adalah elemen asal, butang dalam contoh kami, dan disimpan dalam harta benda objek. Menggunakan delegasi acara, mungkin untuk menambah pengendali acara ke elemen, tunggu acara untuk gelembung dari elemen kanak -kanak dan mudah menentukan dari elemen mana peristiwa itu berasal.

Bagaimana ia akan membantu saya?

Sebagai contoh, saya pernah membuat setiap sel jadual saiz yang boleh diedit apabila diklik. Menambah pengendali acara ke setiap 1000 sel akan menjadi masalah prestasi utama dan, berpotensi, sumber kebocoran memori penyemak imbas. Sebaliknya, dengan menggunakan delegasi acara, anda akan menambah hanya satu pengendali acara ke elemen jadual, memintas acara klik dan menentukan sel mana yang diklik.

Apa yang kelihatan seperti dalam kod?

Kita hanya perlu bimbang tentang mengesan elemen sasaran. Katakan kami mempunyai elemen meja dengan "laporan" ID dan kami telah menambah pengendali acara ke meja untuk acara klik yang akan memanggil fungsi EditCell. Fungsi EditCell perlu menentukan elemen sasaran untuk acara yang telah bubbled sehingga jadual. Mengharapkan bahawa kami akan menulis beberapa fungsi pengendali acara yang memerlukan fungsi ini, kami akan meletakkannya dalam fungsi berasingan yang dipanggil getEventTarget:

fungsi getEventTarget (e) {e = e || window.event; Kembali E.Target || E.Srcelement; ) Sebaik sahaja kita mempunyai rujukan kepada elemen sasaran yang terpulang kepada kita untuk memastikan elemen itu adalah yang kita harapkan:

 fungsi editCell (e) {var sasaran = getEventTarget (e); jika (sasaran.tagname.tolowerCase () === 'td') {// Lakukan sesuatu dengan sel}} 

Dalam fungsi EditCell kami mengesahkan bahawa elemen sasaran adalah sel meja dengan memeriksa nama tagnya. Pemeriksaan itu boleh dipermudahkan; Bagaimana jika elemen lain di dalam sel meja yang menjadi sasaran acara? Pengubahsuaian cepat yang menambah kod untuk mencari elemen TD induk mungkin diperlukan. Bagaimana jika beberapa sel tidak boleh diedit? Dalam hal ini kita boleh menambah nama kelas tertentu ke sel yang tidak boleh dididik dan periksa bahawa elemen sasaran tidak mempunyai nilai nama kelas sebelum membuatnya boleh diedit. Banyak pilihan tersedia dan anda hanya perlu memilih yang sesuai dengan aplikasi anda.

Apakah kebaikan dan keburukan?

Manfaat delegasi acara JavaScript adalah:

Ini adalah yang besar; Prestasi yang lebih baik dan kurang terhempas.

Tidak perlu menyusun semula pengendali selepas kemas kini DOM. Jika kandungan halaman anda dihasilkan secara dinamik, melalui Ajax misalnya, anda tidak perlu menambah dan mengalih keluar pengendali acara kerana elemen dimuatkan atau dibongkar.

gelembung. Acara kabur, tumpuan, beban dan pemunggahan tidak gelembung seperti acara lain. Peristiwa kabur dan fokus sebenarnya boleh diakses menggunakan fasa penangkapan (dalam penyemak imbas selain IE) dan bukannya fasa menggelegak tetapi itu cerita untuk hari yang lain. Sekiranya kod anda mengendalikan acara Mousemove, anda berada dalam risiko yang serius untuk mewujudkan kesesakan prestasi kerana acara Mousemove dicetuskan dengan kerap. Acara Mouseout mempunyai tingkah laku yang unik yang sukar untuk dikendalikan dengan delegasi acara. Ui. Anda juga boleh mencari contoh tanpa perpustakaan sama sekali, seperti ini dari blog jenis yang boleh digunakan. Delegasi acara

adalah alat berguna yang ada dalam kit anda sekiranya keperluan timbul dan mudah dilaksanakan. Kelebihan utama menggunakan delegasi acara ialah ia meningkatkan prestasi dengan mengurangkan jumlah pendengar acara yang dilampirkan pada unsur -unsur. Daripada melampirkan pendengar acara individu ke setiap elemen, anda melampirkan pendengar acara tunggal ke elemen induk. Pendengar ini kemudian mengendalikan acara untuk semua elemen anaknya. Ini amat bermanfaat apabila berurusan dengan sejumlah besar unsur -unsur yang sama, seperti item senarai atau baris jadual.

Bagaimanakah delegasi acara berfungsi dalam JavaScript?

Apabila peristiwa berlaku pada elemen kanak -kanak, ia gelembung melalui pokok Dom, mencetuskan peristiwa yang sama pada setiap elemen induknya. Dengan melampirkan pendengar acara ke elemen induk, anda boleh mengendalikan acara untuk semua elemen anaknya. Objek acara yang diserahkan kepada pengendali acara mengandungi harta 'sasaran', yang merujuk kepada elemen sebenar yang mencetuskan peristiwa tersebut. Anda boleh menggunakan harta ini untuk menentukan cara mengendalikan acara tersebut.

Bolehkah delegasi acara digunakan dengan apa -apa acara dalam JavaScript?

Ya, delegasi acara boleh digunakan dengan apa -apa peristiwa dalam JavaScript yang buih. Walau bagaimanapun, tidak semua peristiwa gelembung. Sebagai contoh, peristiwa 'fokus' dan 'kabur' tidak gelembung dalam semua pelayar. Untuk peristiwa -peristiwa ini, anda boleh menggunakan peristiwa 'focusin' dan 'focusout', yang melakukan gelembung.

Bagaimana saya boleh menghentikan peristiwa yang menggelegak di JavaScript?

Kaedah ini menghalang peristiwa daripada menggelegak pokok Dom. Walau bagaimanapun, berhati -hati apabila menggunakan kaedah ini, kerana ia dapat menghalang pengendali acara lain daripada dicetuskan.

Apakah perbezaan antara delegasi peristiwa dan peristiwa yang mengikat dalam JavaScript?

Pendengar ini hanya akan mengendalikan acara untuk elemen khusus ini. Sebaliknya, delegasi acara melibatkan melampirkan pendengar acara ke elemen induk, yang mengendalikan peristiwa untuk semua elemen anaknya. Teknik ini lebih cekap, terutamanya apabila berurusan dengan sejumlah besar elemen yang sama.

Bolehkah saya menggunakan delegasi acara dengan elemen ditambah secara dinamik?

Ya, salah satu manfaat utama delegasi acara adalah ia berfungsi dengan unsur -unsur yang dinamik. Oleh kerana pendengar acara dilampirkan pada elemen induk, ia dapat mengendalikan peristiwa untuk unsur -unsur kanak -kanak yang ditambahkan ke DOM selepas pendengar dilampirkan. Untuk merujuk kepada elemen yang mencetuskan acara itu, anda boleh menggunakan harta 'sasaran' objek acara.

Bolehkah saya menggunakan delegasi acara dengan jQuery?

Ya, jQuery menyediakan kaedah '.on ()', yang boleh anda gunakan untuk melaksanakan delegasi acara. Kaedah '.on ()' mengambil tiga argumen: jenis acara, pemilih untuk elemen kanak -kanak, dan pengendali acara.

Apakah kesan prestasi menggunakan delegasi acara?

Dengan melampirkan pendengar acara tunggal ke elemen induk, anda mengurangkan bilangan pendengar acara yang perlu diuruskan oleh penyemak imbas, yang boleh membawa kepada peningkatan prestasi yang ketara. Sama seperti peristiwa terbina dalam, peristiwa tersuai boleh membesarkan pokok Dom, membolehkan anda mengendalikannya dengan pendengar acara tunggal yang melekat pada elemen induk.

Atas ialah kandungan terperinci Delegasi Acara JavaScript lebih mudah daripada yang anda fikirkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!