Pendengar Acara & Acara dalam JavaScript

Ketika saya menghampiri penghujung fasa pertama saya dalam program Sekolah Flatiron saya, saya telah mempelajari asas pengaturcaraan dalam JavaScript. Tetapi dalam catatan blog ini, saya akan membincangkan pengalaman saya dengan subjek kegemaran saya lagi: Acara dan Pendengar Acara.

JavaScript boleh mendengar perkara tertentu yang boleh berlaku dalam penyemak imbas yang sedang anda kerjakan. Terdapat banyak perkara yang boleh didengari oleh JS. Beberapa contoh termasuk penekan kekunci, klik tetikus dan penyerahan borang, hanya untuk menamakan beberapa yang paling banyak digunakan. Ia juga berfungsi sebagai cara terbaik untuk melaksanakan interaksi tak segerak, keupayaan halaman untuk bertindak balas kepada input pengguna tanpa mengganggu proses atau memuat semula halaman. Ini penting untuk fungsi apl web, di mana ciri seperti itu dijangkakan. Perkara yang paling saya sukai tentang acara ialah fakta bahawa ia boleh menambahkan banyak interaktiviti pada projek web yang sedang anda usahakan.

Pendengar acara ialah fungsi JavaScript yang menunggu acara tertentu berlaku pada elemen tertentu. Setelah peristiwa dicetuskan, pendengar acara akan melaksanakan blok kod tertentu (biasanya dipanggil fungsi panggil balik). Cara paling biasa untuk melampirkan pendengar acara pada elemen ialah menggunakan kaedah addEventListener.

Saya akan menggunakan contoh peribadi yang sedang saya gunakan dalam projek akhir fasa saya. Untuk projek saya, saya telah mencipta apl web ringkas yang mengambil maklumat daripada API dan memaparkannya pada halaman web dengan elemen interaktif.

Saya memutuskan untuk menggunakan API Amiibo percuma untuk mencipta apl web yang boleh menapis semua Yoshi Amiibos yang dibuat sepanjang tahun. Saya suka idea menggunakan API ini, memandangkan Yoshi ialah watak Nintendo kegemaran saya!

Berikut ialah contoh cara saya membuat menu lungsur turun ini yang membolehkan pengguna menapis melalui Yoshi Amiibos yang berbeza menggunakan pendengar acara!

Berikut ialah rupa kod saya untuk fungsi khusus ini

      const amiiboContainer = document.getElementById('amiibo-container');
      const amiiboDropdown = document.getElementById('amiiboDropdown');
      const amiibos = data.amiibo;

      // Create an array of names for the dropdown search
      const amiiboNames = amiibos.map(amiibo => amiibo.name);

      // Populate the dropdown with Amiibo names
      amiiboNames.forEach(name => {
        const option = document.createElement('option');
        option.value = name;
        option.textContent = name;
        amiiboDropdown.appendChild(option);
      });

      // Display all Amiibos initially
      displayAmiibos(amiibos);

      // Add an event listener to filter Amiibos when the dropdown value changes
      amiiboDropdown.addEventListener('change', (e) => {
        const selectedName = e.target.value;
        const filteredAmiibos = amiibos.filter(amiibo => amiibo.name === selectedName );
        displayAmiibos(filteredAmiibos);
      });
    })

Izinkan saya membimbing anda melalui perkara yang berlaku dalam blok kod ini.

Perkara pertama yang saya lakukan ialah mencipta tatasusunan untuk nama Yoshi Amiibo.

const amiiboNames = amiibos.map(amiibo => amiibo.name);

Baris ini mempunyai fungsi peta yang berulang melalui item yang disimpan dalam tatasusunan amiibos. Untuk setiap objek amiibo, ia akan mengambil sifat nama dan mengembalikan tatasusunan baharu dengan semua nama Amiibo.

Langkah seterusnya ialah mengisi menu lungsur dengan nama Amiibo.

amiiboNames.forEach(name => {
  const option = document.createElement('option');
  option.value = name;
  option.textContent = name;
  amiiboDropdown.appendChild(option);
});

Blok ini mencipta HTML lungsur turun dan isikannya dengan nama Amiibos. Ia berulang pada tatasusunan amiiboNames menggunakan forEach(), kemudian mencipta elemen untuk setiap nama Amiibo individu.

Untuk setiap nama, ia:

1. Mencipta elemen pilihan baharu.
2. Menetapkan atribut nilai pilihan kepada nama Amiibo.
3. Menetapkan teks yang boleh dilihat (Kandungan teks) pilihan kepada nama Amiibo.
4. Menambahkan elemen pilihan baharu kami pada menu lungsur (amiiboDropdown).

Selepas itu, saya memutuskan bahawa saya mahu semua Yoshi Amiibos dipaparkan pada mulanya sebelum menggunakan menu lungsur penapis.

      const amiiboContainer = document.getElementById('amiibo-container');
      const amiiboDropdown = document.getElementById('amiiboDropdown');
      const amiibos = data.amiibo;

      // Create an array of names for the dropdown search
      const amiiboNames = amiibos.map(amiibo => amiibo.name);

      // Populate the dropdown with Amiibo names
      amiiboNames.forEach(name => {
        const option = document.createElement('option');
        option.value = name;
        option.textContent = name;
        amiiboDropdown.appendChild(option);
      });

      // Display all Amiibos initially
      displayAmiibos(amiibos);

      // Add an event listener to filter Amiibos when the dropdown value changes
      amiiboDropdown.addEventListener('change', (e) => {
        const selectedName = e.target.value;
        const filteredAmiibos = amiibos.filter(amiibo => amiibo.name === selectedName );
        displayAmiibos(filteredAmiibos);
      });
    })

Saya mencipta fungsi ini untuk memaparkan semua Amiibos pada halaman apabila halaman dimuatkan. Perkara ini lakukan ialah menghantar keseluruhan tatasusunan amiibos ke dalam fungsi yang baru saya buat di atas.

Akhir sekali, saya terpaksa menyediakan pendengar acara untuk perubahan lungsur turun.

const amiiboNames = amiibos.map(amiibo => amiibo.name);

Ini adalah salah satu bahagian paling penting dalam kod dan merupakan pendengar acara bagi fungsi ini. Inilah yang membolehkan halaman menapis Amiibos yang dipaparkan pada halaman berdasarkan apa yang dipilih dalam menu lungsur turun.

Cara ini berfungsi ialah fungsi addEventListener() mendengar acara perubahan pada elemen amiiboDropdown (atau lungsur turun

). Apabila pengguna apl web memilih nilai baharu, atau dalam kes ini, Yoshi Amiibo tertentu, acara itu akan mencetuskan fungsi panggil balik.

Tertib ini berfungsi ialah:

1. Pembolehubah selectedName akan menyimpan nilai sebarang pilihan yang dipilih dengan e.target.value
2. Ia kemudiannya akan menapis tatasusunan amiibos untuk memastikan ia hanya akan menyertakan Yoshi Amiibo yang sepadan dengan Nama yang dipilih.
3. Selepas menapis, tatasusunan Amiibos yang ditapis kemudiannya dihantar ke displayAmiibos(), yang kemudiannya akan mengemas kini UI dengan senarai ditapis Yoshi Amiibos.

Membungkus

Acara dan Pendengar Acara dalam JavaScript ialah beberapa perkara yang paling penting untuk diketahui semasa membangunkan apl web dengan interaktiviti. Mereka hebat kerana fakta itu sahaja; ia memberikan fungsi dan tujuan apl, sambil memberi pengguna peluang untuk pengalaman yang lancar.

Atas ialah kandungan terperinci Pendengar Acara & Acara dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!