Bagaimana untuk Menggayakan Elemen dengan getElementsByClassName pada Kejadian Peristiwa?

Menukar Gaya Elemen dengan getElementsByClassName pada Acara

Elemen dengan kelas tertentu boleh digayakan pada kejadian acara menggunakan kaedah getElementsByClassName. Walau bagaimanapun, memandangkan kaedah ini mengembalikan tatasusunan elemen, adalah penting untuk mengulang tatasusunan untuk menggunakan gaya pada semua elemen padanan. Selain itu, atribut pengendalian acara sebaris seperti onmouseover tidak digunakan lagi.

Ralat dalam Kod

Kod yang disediakan mempunyai beberapa ralat:

1. GetElementsByClassName hujah kaedah tiada. Ia harus menyatakan nama kelas yang hendak diambil.
2. Atribut ID dalam "
3. Berbilang elemen dengan ID yang sama terdapat pada halaman ("colorswitcher B"), menjadikan panggilan getElementById samar-samar.
4. Panggilan getElementsByClassName tidak dicache, yang boleh menjadi tidak cekap jika berlaku berbilang peristiwa.

Penyelesaian

1. Gunakan document.getElementsByClassName('className') untuk mengambil koleksi elemen yang sepadan.
2. Gunakan addEventListener untuk melampirkan pengendali acara.
3. Cache hasil getElementsByClassName untuk prestasi.
4. Gunakan kelas CSS luaran dan bukannya atribut gaya sebaris untuk mengekalkan kebolehbacaan dan kebolehselenggaraan kod.

Contoh

<code class="javascript">window.onload = function() {
  var aElements = document.getElementsByClassName('classA');
  var bElements = document.getElementsByClassName('classB');

  document.getElementById('elementA').addEventListener('mouseover', function() {
    changeColor(aElements, 'red');
  });

  document.getElementById('elementB').addEventListener('mouseover', function() {
    changeColor(bElements, 'blue');
  });

  function changeColor(elements, color) {
    for (var i = 0; i < elements.length; i++) {
      elements[i].classList.add('class-color-' + color);
    }
  }
};</code>

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Elemen dengan getElementsByClassName pada Kejadian Peristiwa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!