Analisis penggunaan acara tersuai dalam kemahiran JavaScript_javascript

Contoh dalam artikel ini menerangkan penggunaan acara tersuai dalam JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Dalam pembangunan bahagian hadapan web, ramai orang mungkin tidak menggunakan acara tersuai bagi js, tetapi jika anda melakukan projek yang agak besar, terutamanya apabila berbilang orang membangun secara kolaboratif, acara tersuai adalah sangat penting. Jadi, apakah acara tersuai dalam js? Mari lihat contoh dahulu:
Pembangun bahagian hadapan A merangkum fungsi:

Salin kod Kod adalah seperti berikut:

function move(){
alert(a); //Ini mewakili N baris kod
}

Selepas beberapa ketika, pembangun bahagian hadapan B akan memperkayakan fungsi ini berdasarkan A, jadi dia akan menulis seperti ini:

Salin kod Kod adalah seperti berikut:

function move(){
alert(a); //Ini mewakili N baris kod
alert(b); //Ini mewakili N baris kod
}

Adakah anda menemui masalah? B harus memberi perhatian kepada isu penamaan dan konflik dengan pembolehubah, fungsi, dll. Selepas beberapa ketika, pembangun bahagian hadapan C juga akan memperkayakan fungsi ini, jadi:

Salin kod Kod adalah seperti berikut:

function move(){
alert(a); //Ini mewakili N baris kod
alert(b); //Ini mewakili N baris kod
alert(c); //Ini mewakili N baris kod
}

Ia akan menjadi sangat mengecewakan pada masa ini, dan saya pasti ia tidak akan mudah untuk menulis kod dalam C. Cara untuk menyelesaikan masalah ini adalah dengan menggunakan acara tersuai Kami tahu bahawa acara yang sama boleh ditambahkan pada elemen tanpa menjejaskan satu sama lain, seperti:

Salin kod Kod adalah seperti berikut:

window.addEventListener('click',function(){
makluman(1);
} ,salah);
window.addEventListener('klik',function(){
makluman(2);
} ,salah);

Apabila mengklik pada halaman, kedua-dua 1 dan 2 akan muncul, maka kita boleh menggunakan kaedah ini untuk menentukan fungsi kita:

Salin kod Kod adalah seperti berikut:

window.addEventListener('move',function(){
makluman(3);
} ,salah);
window.addEventListener('move',function(){
makluman(4);
} ,salah);

Dengan cara ini, apabila kita melaksanakan move();, 3 dan 4 akan muncul Pergerakan di sini ialah acara tersuai, yang sebenarnya merupakan fungsi

Mari lihat cara menghantar parameter kepada pengendali acara:

Salin kod Kod adalah seperti berikut:

//Enkapsulasi fungsi dengan parameter ke dalam fungsi tanpa parameter
function createFunction(obj, strFunc) {
var args = []; //Define args untuk menyimpan parameter yang dihantar kepada pengendali acara
Jika (!obj) obj = window; //Jika ia adalah fungsi global, obj=window
//Dapatkan parameter diserahkan kepada pengendali acara
untuk (var i = 2; i < arguments.length; i ) args.push(arguments[i]);
//Gunakan fungsi tanpa parameter untuk merangkum panggilan pengendali acara
Kembalikan fungsi() {
          obj[strFunc].apply(obj, args); // Hantar parameter kepada pengendali acara yang ditentukan
}
}
kelas fungsi1() {
}
kelas1.prototaip = {
tunjukkan: function() {
This.onShow();
},
onShow: function() { }
}
fungsi objOnShow(Nama pengguna) {
alert("hello," nama pengguna);
}
ujian fungsi() {
var obj = new class1();
var userName = "ujian";
​ obj.onShow = createFunction(null, "objOnShow", nama pengguna);
Obj.show();
}

"Oleh kerana mekanisme acara hanya menghantar nama fungsi tanpa sebarang maklumat parameter, parameter tidak boleh dihantar kemudian." Fikirkan tentang cara memasukkan parameter, tetapi pertimbangkan cara membina pengendali acara tanpa parameter Program ini dibuat berdasarkan pengendali acara dengan parameter dan merupakan pakej luar "Program" di sini ialah fungsi createFunction fungsi guna untuk merangkum fungsi dengan parameter ke dalam fungsi tanpa parameter. Akhir sekali, mari kita lihat cara melaksanakan berbilang pengikatan acara tersuai:

Salin kod Kod adalah seperti berikut:

// Jadikan acara tersuai menyokong berbilang pengikatan
//Merangkum fungsi dengan parameter ke dalam fungsi tanpa parameter
function createFunction(obj, strFunc) {
var args = []; //Define args untuk menyimpan parameter yang dihantar kepada pengendali acara
Jika (!obj) obj = window; //Jika ia adalah fungsi global, obj=window
//Dapatkan parameter diserahkan kepada pengendali acara
untuk (var i = 2; i < arguments.length; i ) args.push(arguments[i]);
//Gunakan fungsi tanpa parameter untuk merangkum panggilan pengendali acara
Kembalikan fungsi() {
          obj[strFunc].apply(obj, args); // Hantar parameter kepada pengendali acara yang ditentukan
}
}
kelas fungsi1() {
}
kelas1.prototaip = {
tunjukkan: function() {
          jika (ini.onShow) {
untuk (var i = 0; i < this.onShow.length; i ) {
This.onShow[i]();
            }
}
},
attachOnShow: function(_eHandler) {
Jika (!this.onShow) { this.onShow = []; This.onShow.push(_eHandler);
}
}
fungsi objOnShow(Nama pengguna) {
alert("hello," nama pengguna);
}
fungsi objOnShow2(testName) {
alert("show:" testName);
}
ujian fungsi() {
var obj = new class1();
var userName = "nama anda";
Obj.attachOnShow(createFunction(null, "objOnShow", nama pengguna));
Obj.attachOnShow(createFunction(null, "objOnShow2", "test message"));
Obj.show();
}

Kami melihat bahawa idea asas kaedah attachOnShow adalah untuk menolak tatasusunan Malah, kami juga boleh mengalih keluar fungsi pemprosesan acara selepas pelaksanaan acara selesai dilaksanakan secara berasingan di bawah:

Salin kod Kod adalah seperti berikut:

//Funktionen mit Parametern in Funktionen ohne Parameter kapseln
Funktion createFunction(obj, strFunc) {
var args = []; //Argumente definieren, um die an den Event-Handler
übergebenen Parameter zu speichern If (!obj) obj = window; //Wenn es eine globale Funktion ist, obj=window; //Die an den Event-Handler
übergebenen Parameter abrufen for (var i = 2; i < arguments.length; i ) args.push(arguments[i]);
//Verwenden Sie eine Funktion ohne Parameter, um den Aufruf des Ereignishandlers
zu kapseln Rückgabefunktion() {
          obj[strFunc].apply(obj, args); // Parameter an den angegebenen Event-Handler übergeben
}
}
Funktion class1() {
}
class1.prototype = {
show: function() {
          if (this.onShow) {
for (var i = 0; i < this.onShow.length; i ) {
This.onShow[i]();
            }
}
},
attachmentOnShow: function(_eHandler) { // Ereignis anhängen
If (!this.onShow) { this.onShow = []; This.onShow.push(_eHandler);
},
detachOnShow: function(_eHandler) { // Ereignis entfernen
If (!this.onShow) { this.onShow = []; This.onShow.pop(_eHandler);
}
}

Funktion objOnShow(userName) {
alarm("Hallo", Benutzername); }

Funktion objOnShow2(testName) {
alarm("show:" testName);
}
Funktionstest() {
var obj = new class1();
var userName = "Ihr Name";
Obj.attachOnShow(createFunction(null, "objOnShow", userName));
Obj.attachOnShow(createFunction(null, "objOnShow2", "test message"));
Obj.show();
obj.detachOnShow(createFunction(null, "objOnShow", userName));
Obj.show(); // Eines entfernen und das verbleibende anzeigen
obj.detachOnShow(createFunction(null, "objOnShow2", "test message"));
Obj.show(); // Beide entfernen und keines anzeigen
}


Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.