Pemahaman mendalam tentang kemahiran JS event binding_javascript

1. Model acara tradisional

Terdapat batasan dalam model acara tradisional.

Model sebaris digunakan dalam bentuk atribut tag HTML dan dicampur dengan HTML Kaedah ini sudah pasti menyebabkan masalah pengubahsuaian dan pengembangan, dan jarang digunakan lagi.

Model skrip adalah untuk menulis fungsi pemprosesan acara ke dalam fail js, mendapatkan elemen daripada halaman dan mengikat fungsi acara yang sepadan untuk mencetuskan pelaksanaan. Tetapi terdapat juga kekurangan:

1. Sesuatu acara terikat kepada berbilang fungsi mendengar acara, dan yang terakhir akan menggantikan yang pertama.

2. Situasi di mana pengikatan berulang perlu dihadkan

3. Objek acara piawai

2. Pengikat acara moden

Peristiwa peringkat DOM2 mentakrifkan dua kaedah untuk menambah dan memadamkan acara: addEventListener() dan removeEventListener() Mereka masing-masing menerima tiga parameter: nama acara, fungsi, menggelegak atau menangkap nilai Boolean (benar bermakna menangkap, palsu bermakna mempertaruhkan Bubble).

Sejajar dengan itu, IE menyediakan dua kaedah yang serupa, attachEvent() dan detachEvent(), tetapi dua kaedah IE mempunyai masalah lain: objek ini tidak boleh dilalui (ini dalam IE menunjuk ke tetingkap Anda boleh menggunakan kaedah panggilan penyamaran objek:

function addEvent(obj,type,fn){ 
if(typeof obj.addEventListener != 'undefined'){ 
obj.addEventListener(type,fn,false); 
}else if(obj.attachEvent != 'undefined'){ 
obj.attachEvent('on' + type,function(){ 
fn.call(obj,window.event); 
}); 
} 
};

Walau bagaimanapun, oleh kerana fungsi tanpa nama dilaksanakan semasa menambah, ia tidak boleh dipadamkan selepas menambah, selain itu, kaedah yang disediakan oleh IE juga akan menyebabkan masalah tidak dapat melaksanakan acara mengikat secara berurutan dan menyebabkan kebocoran memori.

Untuk menyelesaikan siri masalah ini, perlu merangkumkan lagi kaedah Untuk pelayar lain, gunakan standard tahap DOM2 Untuk IE, gunakan penambahan dan pemadaman berdasarkan mod tradisional >

1. Menambah menggunakan jadual cincang JS untuk menyimpan peristiwa objek, dan memberikan nilai ID kepada setiap peristiwa objek Menurut susunan panggilan yang ditambahkan, mula-mula tentukan sama ada fungsi pemprosesan yang sama wujud . Fungsi ditambahkan pada jadual cincang, yang menyelesaikan masalah tidak dapat dilaksanakan secara berurutan dan ditambah berulang kali

2. Apabila memadam, padanan fungsi traversal dinilai, dan jika wujud, padamkannya

Ringkasan:

Saya tidak mempunyai pemahaman mendalam tentang pengikatan acara JS sebelum ini, malah saya menggunakan model pengikatan acara tradisional, dan pemahaman saya tentang pelaksanaan program masih terlalu cetek perpustakaan. Walaupun perpustakaan js yang serupa dengan JQuery telah mencapai kesan pengkapsulan yang baik dari mekanisme pengikatan data, tetapi anda hanya mengetahuinya dan tidak tahu mengapa, anda masih berasa seperti anda berada dalam kegelapan. anda akan mempunyai perasaan pencerahan secara tiba-tiba, dan anda juga akan menyedari bahawa untuk membuat program yang serasi dan serba boleh, anda perlu mempertimbangkan banyak kandungan dan menyelesaikan banyak masalah, dan anda secara beransur-ansur menjadi lebih jelas tentang masalah ini.