Warum kollidiert meine JavaScript-Funktion mit der ID eines Formularelements?

JavaScript-Funktionsname kollidiert mit Element-ID

Problem:
In JavaScript kann eine Funktion das haben gleicher Name wie eine Element-ID. In einigen Fällen kann dies jedoch zu Fehlern führen. Betrachten Sie die folgenden zwei Codefragmente:

// 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));

Warum funktioniert das erste Snippet, während das zweite fehlschlägt?

Lösung:
Dieses Problem wird durch eine Legacy-Funktion verursacht, die in den JavaScript-Versionen 1.0 bis 1.3 eingeführt wurde. Wenn ein Formularelement Teil eines Formulars ist, erbt es die Eigenschaften des Formulars. Eine dieser Eigenschaften ist der Name des Elements, der auch zur Referenzierung des Elements verwendet werden kann.

Im zweiten Snippet steht der Funktionsname „border“ im Konflikt mit der gleichnamigen Eigenschaft des Formulars. Wenn der Ereignis-Listener ausgelöst wird, versucht JavaScript, die „border“-Eigenschaft des Formulars als Funktion aufzurufen, was fehlschlägt.

Gemäß der W3C DOM Level 2 HTML-Spezifikation kann auf Elemente über ihren Namen oder ihre ID zugegriffen werden die Klammereigenschaften-Accessor-Syntax. Ältere Browser haben diese Funktion jedoch auf Formularsteuerelemente erweitert, sodass auf sie über ihren Namen oder ihre ID mithilfe der Punktnotation zugegriffen werden kann.

Konflikt verhindern:
Um dieses Problem zu vermeiden, Sie sollten sicherstellen, dass Funktionsnamen nicht mit Element-IDs oder anderen JavaScript-Eigenschaften in Konflikt geraten. Darüber hinaus können Sie spezifischere Methoden wie document.querySelector() verwenden, um Elemente zu finden.

Das obige ist der detaillierte Inhalt vonWarum kollidiert meine JavaScript-Funktion mit der ID eines Formularelements?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!