私の JavaScript 関数がフォーム要素の ID と競合するのはなぜですか?

JavaScript 関数名が要素 ID と競合します

問題:
JavaScript では、関数に要素IDと同じ名前。ただし、場合によっては、これによりエラーが発生する可能性があります。次の 2 つのコード スニペットを考えてみましょう:

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

最初のスニペットは機能するのに、2 番目のスニペットは失敗するのはなぜですか?

解決策:
この問題この問題は、JavaScript バージョン 1.0 ～ 1.3 で導入されたレガシー機能が原因で発生します。フォーム要素がフォームの一部である場合、フォーム要素はフォームのプロパティを継承します。これらのプロパティの 1 つは要素の名前であり、要素の参照にも使用できます。

2 番目のスニペットでは、関数名「border」が同じ名前のフォームのプロパティと競合します。イベント リスナーがトリガーされると、JavaScript はフォームの "border" プロパティを関数として呼び出そうとしますが、失敗します。

W3C DOM レベル 2 HTML 仕様によれば、要素には、次を使用して名前または ID によってアクセスできます。括弧プロパティ アクセサー構文。ただし、古いブラウザではこの機能がフォーム コントロールに拡張され、ドット表記を使用して名前または ID でコントロールにアクセスできるようになりました。

競合の防止:
この問題を回避するには、関数名が要素 ID や他の JavaScript プロパティと競合しないことを確認する必要があります。さらに、document.querySelector() などのより具体的なメソッドを使用して要素を見つけることもできます。

以上が私の JavaScript 関数がフォーム要素の ID と競合するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。