Artikel ini menjelaskan penggunaan acara khusus di JavaScript. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Dalam pengembangan front-end web, banyak orang mungkin tidak menggunakan acara khusus JS, tetapi jika Anda melakukan proyek yang relatif besar, terutama ketika banyak orang berkembang bersama, acara khusus sangat penting. Jadi, apa acara khusus di JS? Mari kita lihat contoh pertama:
Pengembang front-end A merangkum suatu fungsi:
Salin kode sebagai berikut: function move () {
waspada (a); // Ini mewakili kode N-line
}
Setelah beberapa saat, pengembang front-end B akan memperkaya fungsi ini berdasarkan A, jadi dia akan menulis seperti ini:
Salin kode sebagai berikut: function move () {
waspada (a); // Ini mewakili kode N-line
waspada (b); // Ini mewakili N baris kode
}
Sudahkah Anda menemukan masalahnya? B harus memperhatikan masalah penamaan dan konflik dengan variabel, fungsi, dll. Dengan A. Setelah beberapa saat, pengembang front-end C juga harus memperkaya fungsi ini, jadi:
Salin kode sebagai berikut: function move () {
waspada (a); // Ini mewakili kode N-line
waspada (b); // Ini mewakili N baris kode
peringatan (c); // Ini mewakili N baris kode
}
Ini akan gila saat ini, dan saya yakin tidak akan mudah bagi C untuk menulis kode. Solusi untuk masalah ini adalah untuk menyesuaikan acara, kami tahu bahwa suatu elemen dapat menambahkan peristiwa yang sama tanpa saling mempengaruhi, seperti:
Salinan kode adalah sebagai berikut: window.addeventListener ('klik', fungsi () {
waspada (1);
} ,PALSU);
window.addeventListener ('klik', function () {
waspada (2);
} ,PALSU);
Saat mengklik pada halaman, 1 dan 2 akan muncul, sehingga kami dapat menggunakan metode ini untuk menentukan fungsi kami:
Salinan kode adalah sebagai berikut: window.addeventListener ('move', function () {
waspada (3);
} ,PALSU);
window.addeventListener ('move', function () {
waspada (4);
} ,PALSU);
Dengan cara ini, ketika kami mengeksekusi MOVE ();, 3 dan 4 akan muncul. Di sini, MOVE adalah acara khusus, itu sebenarnya adalah fungsi
Mari kita lihat cara meneruskan parameter ke penangan acara:
Salin kode sebagai berikut: // Encapsulate fungsi dengan parameter ke dalam fungsi tanpa parameter
fungsi createFunction (obj, strfunc) {
var args = []; // Tentukan arg untuk menyimpan parameter yang diteruskan ke penangan acara
if (! obj) obj = window; // Jika itu adalah fungsi global, obj = window;
// Dapatkan parameter yang diteruskan ke penangan acara
untuk (var i = 2; i <arguments.length; i ++) args.push (argumen [i]);
// Gunakan panggilan event handler dengan fungsi tanpa parameter
return function () {
obj [strfunc] .Apply (obj, args); // Lewati parameter ke penangan acara yang ditentukan
}
}
fungsi class1 () {
}
class1.prototype = {
Tampilkan: function () {
this.onchow ();
},
Onshow: function () {}
}
fungsi objonshow (nama pengguna) {
peringatan ("halo," + nama pengguna);
}
function test () {
var obj = class1 () baru;
var username = "test";
obj.onshow = createFunction (null, "objONShow", nama pengguna);
obj.show ();
}
"Karena mekanisme peristiwa hanya melewati nama fungsi tanpa informasi parameter, tidak mungkin untuk meneruskan parameter." Ini adalah cerita selanjutnya. "Untuk mengatasi masalah ini, Anda dapat mempertimbangkan dari ide yang berlawanan, tidak mempertimbangkan bagaimana cara meneruskan parameter, tetapi mempertimbangkan bagaimana membangun event handler tanpa parameter. Program ini dibuat berdasarkan event handler dengan parameter dan merupakan enkapsulasi luar." "Program" di sini adalah fungsi createFunction, yang secara cerdik menggunakan fungsi Apply untuk merangkum fungsi dengan parameter ke dalam fungsi tanpa parameter. Akhirnya, mari kita lihat cara menerapkan multi-binding untuk acara khusus:
Salin kode sebagai berikut: // untuk mengaktifkan acara khusus untuk mendukung beberapa binding
// Encapsulate fungsi dengan parameter ke dalam fungsi tanpa parameter
fungsi createFunction (obj, strfunc) {
var args = []; // Tentukan arg untuk menyimpan parameter yang diteruskan ke penangan acara
if (! obj) obj = window; // Jika itu adalah fungsi global, obj = window;
// Dapatkan parameter yang diteruskan ke penangan acara
untuk (var i = 2; i <arguments.length; i ++) args.push (argumen [i]);
// Gunakan panggilan event handler dengan fungsi tanpa parameter
return function () {
obj [strfunc] .Apply (obj, args); // Lewati parameter ke penangan acara yang ditentukan
}
}
fungsi class1 () {
}
class1.prototype = {
Tampilkan: function () {
if (this.onchow) {
untuk (var i = 0; i <this.onshow.length; i ++) {
this.onshow [i] ();
}
}
},
lampiran lampiran: function (_ehandler) {
if (! this.onshow) {this.onshow = []; }
this.onshow.push (_ehandler);
}
}
fungsi objonshow (nama pengguna) {
peringatan ("halo," + nama pengguna);
}
Fungsi objONShow2 (testName) {
alert ("show:" + testName);
}
function test () {
var obj = class1 () baru;
var username = "name your";
obj.attachonshow (createFunction (null, "objonshow", nama pengguna));
obj.attachonshow (createFunction (null, "objONShow2", "uji pesan"));
obj.show ();
}
Kami melihat bahwa ide dasar implementasi metode lampiran adalah untuk mendorong array. Bahkan, kami juga dapat menghapus fungsi event handler setelah acara dieksekusi, dan mengimplementasikannya secara terpisah di bawah ini:
Salin kode sebagai berikut: // Encapsulate fungsi dengan parameter ke dalam fungsi tanpa parameter
fungsi createFunction (obj, strfunc) {
var args = []; // Tentukan arg untuk menyimpan parameter yang diteruskan ke penangan acara
if (! obj) obj = window; // Jika itu adalah fungsi global, obj = window;
// Dapatkan parameter yang diteruskan ke penangan acara
untuk (var i = 2; i <arguments.length; i ++) args.push (argumen [i]);
// Gunakan panggilan event handler dengan fungsi tanpa parameter
return function () {
obj [strfunc] .Apply (obj, args); // Lewati parameter ke penangan acara yang ditentukan
}
}
fungsi class1 () {
}
class1.prototype = {
Tampilkan: function () {
if (this.onchow) {
untuk (var i = 0; i <this.onshow.length; i ++) {
this.onshow [i] ();
}
}
},
lampiran: fungsi (_ehandler) {// acara tambahan
if (! this.onshow) {this.onshow = []; }
this.onshow.push (_ehandler);
},
detachonshow: function (_ehandler) {// hapus acara
if (! this.onshow) {this.onshow = []; }
this.onshow.pop (_ehandler);
}
}
fungsi objonshow (nama pengguna) {
peringatan ("halo," + nama pengguna);
}
Fungsi objONShow2 (testName) {
alert ("show:" + testName);
}
function test () {
var obj = class1 () baru;
var username = "name your";
obj.attachonshow (createFunction (null, "objonshow", nama pengguna));
obj.attachonshow (createFunction (null, "objONShow2", "uji pesan"));
obj.show ();
obj.detachonshow (createFunction (null, "objonshow", nama pengguna));
obj.show (); // Hapus satu dan tampilkan yang tersisa
obj.detachonshow (createFunction (null, "objonjow2", "uji pesan"));
obj.show (); // keduanya dihapus, dan tidak ada yang ditampilkan
}
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.