Pemikiran di sebalik pengendali acara memudahkan

Peristiwa digunakan untuk bertindak balas terhadap klik pengguna, pautan fokus papan kekunci, dan menukar teks borang. Apabila saya mula belajar JavaScript, saya menulis pendengar acara yang kompleks. Baru -baru ini, saya telah belajar bagaimana untuk mengurangkan jumlah kod dan bilangan pendengar.

Mari kita mulakan dengan contoh mudah: beberapa blok draggable. Kami mahu menunjukkan pengguna dataran berwarna yang mereka seret.

<div draggable="true">
    R
  </div>
  <div draggable="true">
    Y
  </div>
  <div draggable="true">
    G
  </div>
<p>Seret blok</p>

Pendekatan intuitif

Apabila saya mula belajar acara JavaScript, saya menulis fungsi pendengar acara yang berasingan untuk setiap elemen. Ini adalah corak yang sama kerana ia adalah cara paling mudah untuk bermula. Kami mahu setiap elemen mempunyai tingkah laku tertentu, jadi kami boleh menggunakan kod tertentu untuk setiap elemen.

 Document.QuerySelector ('#Red'). AddEventListener ('Dragstart', evt => {
  Document.QuerySelector ('#Dragged'). TextContent = 'Dragged Red';
});

Document.QuerySelector ('#kuning'). AddEventListener ('Dragstart', evt => {
  Document.QuerySelector ('#Dragged'). TextContent = 'Dragged Yellow';
});

Document.QuerySelector ('#Green'). AddEventListener ('DragStart', evt => {
  Document.QuerySelector ('#Dragged'). TextContent = 'Dragged Green';
});

Kurangkan kod pendua

Pendengar acara dalam contoh ini sangat serupa: setiap fungsi memaparkan beberapa teks. Kod pendua ini boleh runtuh ke dalam fungsi pembantu.

 Pratonton fungsi (warna) {
  document.QuerySelector ('#Dragged'). TextContent = `Dragged $ {Color}`;
}

dokumen
  .QuerySelector ('#Red')
  .AdDeventListener ('DragStart', evt => pratonton ('merah'));
dokumen
  .QuerySelector ('#kuning')
  .AdDeventListener ('DragStart', evt => pratonton ('kuning'));
dokumen
  .QuerySelector ('#Green')
  .AdDeventListener ('DragStart', evt => pratonton ('hijau'));

Ini lebih ringkas, tetapi masih memerlukan pelbagai fungsi dan pendengar acara.

Objek acara leverage

Objek acara adalah kunci untuk memudahkan pendengar. Apabila pendengar acara dipanggil, ia juga menghantar objek acara sebagai parameter pertama. Objek ini mengandungi beberapa data untuk menggambarkan peristiwa yang berlaku, seperti ketika kejadian berlaku. Untuk memudahkan kod kami, kami boleh menggunakan harta evt.currentTarget , di mana currentTarget merujuk kepada elemen yang melampirkan pendengar acara. Dalam contoh kami, ia akan menjadi salah satu daripada tiga dataran berwarna.

 const pratonton = evt => {
  const color = evt.currentTarget.id;
  document.QuerySelector ('#Dragged'). TextContent = `Dragged $ {Color}`;
};

Document.QuerySelector ('#Red'). AddEventListener ('DragStart', Preview);
Document.QuerySelector ('#Yellow'). AddEventListener ('DragStart', Preview);
Document.QuerySelector ('#Green'). AddEventListener ('DragStart', Preview);

Kini hanya ada satu fungsi dan bukannya empat fungsi. Kita boleh menggunakan semula fungsi yang sama seperti pendengar acara, manakala evt.currentTarget.id akan mempunyai nilai yang berbeza bergantung kepada elemen yang mencetuskan peristiwa tersebut.

Gunakan gelembung acara

Perubahan terakhir adalah untuk mengurangkan bilangan baris dalam kod. Daripada melampirkan pendengar acara ke setiap blok, lampirkan pendengar acara tunggal ke elemen yang mengandungi semua blok berwarna.

Apabila dicetuskan, peristiwa bermula dengan elemen (salah satu dataran) peristiwa yang berasal. Walau bagaimanapun, ia tidak akan berhenti di sana. Penyemak imbas pergi ke setiap elemen induk elemen dan memanggil mana -mana pendengar acara di atasnya. Ini akan terus menjadi elemen akar dokumen (dalam html Label). Proses ini dipanggil "gelembung", kerana peristiwa naik seperti gelembung ke dalam pokok dokumen. Melampirkan pendengar acara ke elemen seksyen akan menyebabkan peristiwa fokus menjadi gelembung dari persegi berwarna yang diseret ke elemen induk. Kami juga boleh mengambil kesempatan daripada harta evt.target , yang mengandungi elemen yang mencetuskan peristiwa (salah satu dataran) dan bukannya elemen yang melampirkan pendengar acara (elemen section ).

 const pratonton = evt => {
  const color = evt.target.id;
  document.QuerySelector ('#Dragged'). TextContent = `Dragged $ {Color}`;
};

Document.QuerySelector ('Seksyen'). AddEventListener ('DragStart', Preview);

Sekarang kita telah mengurangkan banyak pendengar acara kepada hanya satu! Untuk kod yang lebih kompleks, ia akan berfungsi dengan lebih baik. Dengan memanfaatkan objek acara dan menggelegak, kami dapat mengawal peristiwa JavaScript dan memudahkan kod pengendali acara.

Bagaimana dengan acara klik?

evt.target sangat berkesan dengan peristiwa seperti dragstart dan change , di mana hanya beberapa elemen yang dapat menerima fokus atau menukar input.

Walau bagaimanapun, kami biasanya ingin mendengar acara klik supaya kami dapat bertindak balas kepada pengguna yang mengklik butang dalam aplikasi. Acara klik dicetuskan untuk mana -mana elemen dalam dokumen, dari div besar ke rentang kecil.

Mari kita ubah dataran berwarna draggable kami untuk diklik.

<div draggable="true">
    R
  </div>
  <div draggable="true">
    Y
  </div>
  <div draggable="true">
    G
  </div>
<p>Klik pada Dataran</p>

 const pratonton = evt => {
  const color = evt.target.id;
  document.QuerySelector ('#diklik'). TextContent = `diklik $ {color}`;
};

Document.QuerySelector ('Seksyen'). AddEventListener ('klik', pratonton);

Apabila menguji kod ini, sedar bahawa kadang -kadang "diklik" tidak dilampirkan, tidak apabila mengklik pada persegi. Sebabnya tidak berfungsi ialah setiap blok mengandungi diklik<span></span> unsur -unsur, tidak draggable<div> elemen. Oleh kerana SPAN tidak mempunyai set ID, harta <code>evt.target.id adalah rentetan kosong. Kami hanya peduli dengan dataran berwarna dalam kod. Jika kita mengklik di suatu tempat di dalam dataran, kita perlu mencari elemen persegi induk. Kita boleh menggunakan element.closest() untuk mencari elemen induk yang paling dekat dengan elemen yang diklik.

 const pratonton = evt => {
  const element = evt.target.closest ('div [draggable]');
  jika (elemen! = null) {
    const color = element.id;
    document.QuerySelector ('#diklik'). TextContent = `diklik $ {color}`;
  }
};

Sekarang kita boleh menggunakan pendengar tunggal untuk acara klik! Jika element.closest() mengembalikan null, ini bermakna pengguna mengklik di suatu tempat di luar persegi berwarna, dan kita harus mengabaikan acara tersebut.

Lebih banyak contoh

Berikut adalah beberapa contoh lain yang menunjukkan bagaimana untuk mengambil kesempatan daripada pendengar acara tunggal.

Senarai

Corak yang sama adalah untuk mempunyai senarai projek interaktif di mana projek -projek baru dimasukkan secara dinamik menggunakan JavaScript. Jika kami melampirkan pendengar acara untuk setiap projek, kod mesti mengendalikan pendengar acara setiap kali elemen baru dihasilkan.

<div id="buttons-container"></div>
<button id="add">Tambahkan butang baru</button>

 Biarkan ButtonCounter = 0;
Document.QuerySelector ('#add'). AddEventListener ('klik', evt => {
  const newButton = document.createElement ('butang');
  newButton.TextContent = ButtonCounter;

  // Buat pendengar acara baru setiap kali anda mengklik "Tambah butang baru" newbutton.addeventListener ('klik', evt => {

    // Apabila diklik, rekod bilangan butang yang diklik.
    document.QuerySelector (' #diklik'). TextContent = `Butang diklik #$ {newButton.TextContent}`;
  });

  ButtonCounter;

  const container = document.QuerySelector ('#buttons-container');
  container.AppendChild (Newbutton);
});

Dengan memanfaatkan gelembung, kita boleh menggunakan pendengar acara tunggal pada bekas. Jika kita membuat banyak elemen dalam aplikasi, ini mengurangkan bilangan pendengar dari n hingga dua.

 Biarkan ButtonCounter = 0;
const container = document.QuerySelector ('#buttons-container');
Document.QuerySelector ('#add'). AddEventListener ('klik', evt => {
  const newButton = document.createElement ('butang');
  newButton.dataset.number = ButtonCounter;
  ButtonCounter;

  container.AppendChild (Newbutton);
});
container.addeventListener ('klik', evt => {
  const clickedButton = evt.target.closest ('butang');
  jika (clickedButton! = null) {
    // Apabila diklik, rekod bilangan butang yang diklik.
    document.QuerySelector (' #diklik'). TextContent = `Butang diklik #$ {clickedButton.dataset.number}`;
  }
});

Bentuk

Mungkin ada bentuk dengan banyak input dan kami ingin mengumpulkan semua respons pengguna ke dalam satu objek.

Nama:
Mel:
Kata Laluan:

Biarkan jawapan = {
  Nama: '',
  E -mel: '',
  Kata Laluan: ''
};

dokumen
  .QuerySelector ('input [name = "name"]')
  .AdDeventListener ('perubahan', evt => {
    const inputElement = document.QuerySelector ('input [name = "name"]');
    responses.name = inputelement.value;
    Document.QuerySelector ('#pratonton'). TextContent = json.stringify (respons);
  });
dokumen
  .QuerySelector ('input [name = "email"]')
  .AdDeventListener ('perubahan', evt => {
    const inputElement = document.QuerySelector ('input [name = "email"]');
    respons.email = inputelement.value;
    Document.QuerySelector ('#pratonton'). TextContent = json.stringify (respons);
  });
dokumen
  .QuerySelector ('input [name = "password"]')
  .AdDeventListener ('perubahan', evt => {
    const inputElement = document.QuerySelector ('input [name = "password"]');
    responses.password = inputelement.value;
    Document.QuerySelector ('#pratonton'). TextContent = json.stringify (respons);
  });

Mari gunakan ibu bapa sebaliknya<form></form> Pendengar tunggal pada elemen.

 Biarkan jawapan = {
  Nama: '',
  E -mel: '',
  Kata Laluan: ''
};

Document.QuerySelector ('Form'). AddEventListener ('perubahan', evt => {
  respons [evt.target.name] = evt.target.value;
  Document.QuerySelector ('#pratonton'). TextContent = json.stringify (respons);
});

kesimpulannya

Sekarang kita tahu bagaimana untuk memanfaatkan gelembung acara dan objek acara untuk memudahkan kekacauan pengendali acara yang kompleks kepada beberapa ... dan kadang -kadang juga mengurangkan kepada satu! Semoga artikel ini membantu anda memikirkan pengendali acara dari perspektif baru. Saya tahu bahawa selepas menghabiskan banyak masa menulis kod pendua untuk melakukan perkara yang sama dalam kerjaya pembangunan awal saya, itu adalah wahyu bagi saya.