Mengapa Fungsi JavaScript Saya Bercanggah dengan ID Elemen Borang?

Nama Fungsi JavaScript Bercanggah dengan ID Elemen

Masalah:
Dalam JavaScript, fungsi boleh mempunyai nama yang sama dengan ID elemen. Walau bagaimanapun, dalam beberapa kes, ini boleh membawa kepada ralat. Pertimbangkan dua coretan kod berikut:

// Works as expected
function border(border) { alert(border); }

const select = document.getElementById('border');
select.addEventListener('change', () => border(select.value));

// Fails with "not a function" error
function border(border) { alert(border); }

const form = document.getElementById('border');
form.addEventListener('change', () => border(form.value));

Mengapakah coretan pertama berfungsi manakala coretan kedua gagal?

Penyelesaian:
Isu ini disebabkan oleh ciri warisan yang diperkenalkan dalam JavaScript versi 1.0 hingga 1.3. Apabila unsur bentuk adalah sebahagian daripada bentuk, ia mewarisi sifat bentuk. Salah satu sifat ini ialah nama elemen, yang juga boleh digunakan untuk merujuk elemen.

Dalam coretan kedua, nama fungsi "sempadan" bercanggah dengan sifat borang dengan nama yang sama. Apabila pendengar acara dicetuskan, JavaScript cuba memanggil sifat "sempadan" borang sebagai fungsi, yang gagal.

Menurut Spesifikasi HTML W3C DOM Tahap 2, elemen boleh diakses dengan nama atau ID mereka menggunakan sintaks pelengkap harta kurungan. Walau bagaimanapun, penyemak imbas lama memperluaskan ciri ini untuk membentuk kawalan, membenarkan mereka diakses dengan nama atau ID mereka menggunakan notasi titik.

Mencegah Konflik:
Untuk mengelakkan isu ini, anda harus memastikan bahawa nama fungsi tidak bercanggah dengan ID elemen atau sifat JavaScript lain. Selain itu, anda boleh menggunakan kaedah yang lebih khusus, seperti document.querySelector(), untuk mencari elemen.

Atas ialah kandungan terperinci Mengapa Fungsi JavaScript Saya Bercanggah dengan ID Elemen Borang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!