Bagaimana Menugaskan Pendengar Acara kepada Berbilang Objek Tanpa Konflik Skop?

Tugasan Pendengar Acara Menggunakan Fungsi Berulang

Apabila menggunakan gelung untuk menambah pendengar acara pada berbilang objek, nampaknya semua pendengar merujuk objek yang sama, biasanya yang terakhir dalam gelung. Ini adalah kerana cara JavaScript mengendalikan skop pembolehubah dan penutupan fungsi.

Untuk menangani isu ini, gunakan pendekatan berikut:

// Autoloading function to add the listeners:
var elem = document.getElementsByClassName("triggerClass");

for (var i = 0; i < elem.length; i += 2) {
  (function () {
    var k = i + 1;
    var boxa = elem[i].parentNode.id;
    var boxb = elem[k].parentNode.id;

    elem[i].addEventListener("click", function() { makeItHappen(boxa, boxb); }, false);
    elem[k].addEventListener("click", function() { makeItHappen(boxb, boxa); }, false);
  }());
}

Dalam kod ini, fungsi tanpa nama dililitkan pada bahagian dalam skop, mewujudkan penutupan untuk setiap lelaran. Dengan melaksanakan fungsi serta-merta dengan operator '()', setiap lelaran mempunyai skop peribadinya sendiri, memastikan pembolehubah dan fungsi di dalamnya tidak mengganggu fungsi lelaran lain.

Pendekatan ini memberikan setiap pendengar acara akses kepada pembolehubah yang dimaksudkan, menyelesaikan isu semua pendengar yang menyasarkan objek yang sama.

Atas ialah kandungan terperinci Bagaimana Menugaskan Pendengar Acara kepada Berbilang Objek Tanpa Konflik Skop?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!