JavaScript 関数名と要素 ID の衝突を回避するにはどうすればよいですか?

関数名が JavaScript の要素 ID と衝突する

Web 開発者は、JavaScript 関数名が要素 ID と衝突するという特有の問題に遭遇することがよくあります。 「は関数ではありません」などのエラーが発生します。この問題は、Web 開発の初期に発生した JavaScript のレガシー機能に起因します。

レガシー スコープ チェーンの問題

JavaScript 1.0 ～ 1.3 では、プログラミング言語と DOM API を明確に区別します。したがって、フォーム コントロールは、コントロールの名前を含むフォーム オブジェクトのプロパティにアクセスできます。これは、select 要素の ID が「border」の場合、次のコードが機能することを意味します:

function border(border) { alert(border); }
<select>

ただし、この単純さには注意点があります。フォーム コントロールがフォーム内に配置される場合、フォーム オブジェクトはスコープ チェーンの 3 番目の次になります。その結果、次のコードは失敗します:

<form>
  <select>

この場合、フォーム オブジェクトの "border" プロパティがグローバルな "border" 関数を覆い隠し、「関数ではありません」エラーが発生します。

W3C DOM レベル 2 HTML 互換性

この問題に対処するには、 W3C DOM レベル 2 HTML では、ブラケット プロパティ アクセサー構文を介して、名前または ID によって要素にアクセスする機能が導入されました。これは、次のコードが上記の問題のあるコードと同等になったことを意味します:

document.forms["myForm"].elements["border"](this.value)

推奨事項

この衝突の問題を回避するには、フォーム コントロールの名前または ID は、ユーザー定義関数の場合と同じです。さらに、開発者は、関数とその引数の 1 つに同じ識別子を使用しないようにする必要があります。これは、関数内から関数オブジェクトにアクセスできなくなるためです。

以上がJavaScript 関数名と要素 ID の衝突を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。