Analisis ringkas proksi acara dalam javascript

Kandungan utama artikel ini adalah berdasarkan idea penyelesaian masalah deduplikasi tatasusunan yang saya lakukan semasa temu duga baru-baru ini untuk kedudukan pembangunan bahagian hadapan Web syarikat, dan saya ingin berkongsi dengan anda .

Soalannya sendiri sangat mudah: terdapat seribu li dalam ul. Bagaimana untuk mengikat acara klik tetikus kepada seribu li ini Apabila tetikus diklik, kandungan li dan kedudukan menyelaras xy daripada li akan dimaklumkan ,

123...1000

Anda perlu mempertimbangkan keserasian penyemak imbas, acara menggelegak, kecekapan dan isu lain. Selepas melihat soalan itu, saya menulis jawapan berikut terus di atas kertas:

var ulItem = document.getElementById("ulItem");
var lis = document.getElementsByTagName("li");
for(var i=0; i<lis.length; i++){
 lis[i].onclick = function(){
 alert("内容："+this.innerHTML);
 alert("位置："+getElementPosition(this).x+","+getElementPosition(this).y;
 }
}
function getElementPosition(e){
 var x=0,y=0;
 while(e != null){
 x += e.offsetLeft;
 y += e.offsetTop;
 e = e.offsetParent;
 }
　　return {x:x, y:y};
}

Hasil temu bual: Selepas saya selesai menulis, saya membacanya semula dan merasakan bahawa ada tidak perlu mempertimbangkan keserasian. Mengenai kecekapan, selepas memikirkannya, saya tidak dapat memikirkan bagaimana untuk memperbaikinya, jadi saya hanya menunjukkannya kepada penemuduga. Pewawancara itu juga sangat baik Selepas membacanya, dia berkata: Anda tidak mempertimbangkan perkara utama yang saya nyatakan adalah sangat tidak cekap untuk anda menambah acara klik sebanyak 1,000 kali. Kemudian dia memberitahu saya tentang menggunakan ciri menggelegak acara untuk meningkatkan kecekapan, iaitu, proksi acara (ps: Saya telah menemui masa apabila saya terpaksa menghalang acara menggelegak semasa melakukan projek pada masa lalu, tetapi menggunakan ciri menggelegak acara untuk meningkatkan kecekapan telah tidak dilakukan sama sekali. Selepas mendengar kata penemuduga, saya teruja Selepas saya kembali, saya juga menyemak di Internet Sekarang saya akan meringkaskannya sebagai rekod proses pembelajaran saya:

Acara. Delegasi , juga dipanggil delegasi acara. ialah teknik biasa untuk mengikat acara dalam JavaScript. Seperti namanya, "proksi acara" mewakilkan acara yang pada asalnya perlu terikat pada elemen induk, membenarkan elemen induk mengambil alih peranan sebagai pendengar acara.

Mengapa anda melakukan ini? Seperti yang kita semua tahu, operasi DOM sangat memakan prestasi, jadi pengikatan acara berulang hanyalah pembunuh prestasi. Idea teras proksi acara adalah untuk memantau seberapa banyak peristiwa yang mungkin melalui sesedikit mungkin pengikatan. Untuk pengaturcara, jika tiada kod, izinkan saya katakan J8 Kod disiarkan di bawah:

var ulItem = document.getElementById("ulItem");
ulItem.onclick = function(e){
 e = e || window.event;//这一行和下一行是为了兼容IE8以及之前版本
 var target = e.target || e.srcElement;
 if(target.tagName.toLowerCase() === "li"){
 alert(target.innerHTML);
 alert("位置为："+getElementPosition(target).x+","+getElementPosition(target).y);
 }
}
function getElementPosition(e){
 var x=0,y=0;
 while(e != null){
 x += e.offsetLeft;
 y += e.offsetTop;
 e = e.offsetParent;
 }
　　return {x:x, y:y};
}

Nah, sekarang kod itu telah mengalih keluar gelung untuk, yang meningkatkan kecekapan dan mempunyai keserasian Mengenai rawatan seks, saya rasa jawapan ini sepatutnya memadai. Apa yang saya katakan di atas hanyalah untuk soalan ujian bertulis Mari kita bincangkan mengenainya berdasarkan kajian akademik Ejen acara:

Dalam pemprosesan acara tradisional, anda. Tambah atau alih keluar pengendali acara untuk setiap elemen mengikut keperluan. Walau bagaimanapun, pengendali acara akan berpotensi menyebabkan kebocoran memori atau kemerosotan prestasi - risiko meningkat apabila anda menggunakannya. Delegasi acara JavaScript ialah teknik mudah yang membolehkan anda menambah pengendali acara pada elemen induk, dengan itu mengelakkan keperluan untuk menambah pengendali acara pada berbilang elemen anak. Proksi acara menggunakan dua ciri yang sering diabaikan dalam acara JavaScript: acara menggelegak dan elemen sasaran. Apabila peristiwa dicetuskan pada elemen, seperti klik tetikus pada butang, peristiwa yang sama akan dicetuskan pada semua elemen nenek moyang elemen tersebut. Proses ini dipanggil acara menggelegak daripada elemen asal ke bahagian atas pokok DOM. Elemen sasaran bagi sebarang acara ialah elemen pertama, dalam kes kami butang, dan ia muncul sebagai sifat dalam objek acara kami. Menggunakan proksi acara, kita boleh menambah pengendali acara pada elemen, menunggu acara muncul daripada elemen anaknya dan mengetahui elemen dari mana acara itu bermula.

Mengenai proksi acara, hari ini juga merupakan kenalan pertama saya dengannya, jadi saya akan menulis ini terlebih dahulu. Saya harap ia akan membantu pembelajaran semua orang Untuk lebih banyak tutorial berkaitan, sila layari Tutorial Video JavaScript !