Bagaimanakah Saya Boleh Mengawal Nilai \'ini\' dalam Pengendali Acara Menggunakan `addEventListener`?

Nilai "ini" dalam Pengendali Menggunakan addEventListener

Apabila menggunakan kaedah addEventListener untuk mengendalikan acara, nilai "ini" dalam fungsi pengendali boleh punca kekeliruan. Secara lalai, "ini" merujuk kepada elemen yang menimbulkan acara. Walau bagaimanapun, terdapat teknik untuk mengubah suai tingkah laku ini dan memastikan "ini" merujuk kepada objek yang diingini.

Dalam contoh khusus anda dengan objek Jadual tiket, isu timbul dalam fungsi handleCellClick. Apabila dipanggil sebagai pengendali acara, "ini" menunjuk kepada elemen yang menerima acara klik, bukan objek Jadual tiket.

Untuk menyelesaikan masalah ini, anda boleh menggunakan kaedah bind, yang membolehkan anda menentukan nilai daripada "ini" untuk fungsi tertentu. Dengan mengikat "ini" pada objek Jadual tiket, anda boleh memastikan bahawa "ini" merujuk objek yang betul dalam fungsi handleCellClick. Berikut ialah versi terkini kod anda yang menunjukkan perkara ini:

<code class="js">ticketTable.prototype.render = function(element) {
  // ...

  // Bind "this" to ticketTable object for handleCellClick function
  cell1.addEventListener("click", this.handleCellClick.bind(this), false);

  // ...
}

ticketTable.prototype.handleCellClick = function() {
  // Now, "this" references the ticketTable object within the handler
  alert(this.tickets.length);
}</code>

Dengan mengikat "ini" pada objek Jadual tiket, anda boleh mengakses sifat dan kaedahnya dalam fungsi handleCellClick, seperti yang dimaksudkan.

Sebagai alternatif, anda boleh menggunakan fungsi handleEvent untuk menangkap sebarang acara dan mentakrifkan nilai "ini" secara eksplisit:

<code class="js">ticketTable.prototype.handleEvent = function(event) {
  switch (event.type) {
    case "click":
      // "this" references the ticketTable object
      alert(this.tickets.length);
      break;
    // ...
  }
}</code>

Dalam kes ini, "ini" akan sentiasa merujuk kepada objek Jadual tiket semasa mengendalikan acara, tanpa mengira elemen yang membangkitkan acara.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengawal Nilai \'ini\' dalam Pengendali Acara Menggunakan `addEventListener`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!