내 JavaScript 기능이 양식 요소의 ID와 충돌하는 이유는 무엇입니까?

JavaScript 함수 이름이 요소 ID와 충돌합니다

문제:
JavaScript에서 함수는 다음을 가질 수 있습니다. 요소 ID와 이름이 동일합니다. 그러나 어떤 경우에는 이로 인해 오류가 발생할 수 있습니다. 다음 두 코드 조각을 고려하십시오.

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

첫 번째 조각은 작동하지만 두 번째 조각은 실패하는 이유는 무엇입니까?

해결책:
이 문제 JavaScript 버전 1.0~1.3에 도입된 레거시 기능으로 인해 발생합니다. 양식 요소가 양식의 일부인 경우 양식의 속성을 상속합니다. 이러한 속성 중 하나는 요소 이름으로, 요소를 참조하는 데에도 사용할 수 있습니다.

두 번째 스니펫에서 함수 이름 "border"는 동일한 이름의 양식 속성과 충돌합니다. 이벤트 리스너가 트리거되면 JavaScript는 양식의 "테두리" 속성을 함수로 호출하려고 시도하지만 실패합니다.

W3C DOM 레벨 2 HTML 사양에 따르면 요소는 다음을 사용하여 이름이나 ID로 액세스할 수 있습니다. 대괄호 속성 접근자 구문. 그러나 이전 브라우저에서는 이 기능을 양식 컨트롤로 확장하여 점 표기법을 사용하여 이름이나 ID로 액세스할 수 있도록 했습니다.

충돌 방지:
이 문제를 방지하려면, 함수 이름이 요소 ID 또는 기타 JavaScript 속성과 충돌하지 않는지 확인해야 합니다. 또한 document.querySelector()와 같은 보다 구체적인 메소드를 사용하여 요소를 찾을 수 있습니다.

위 내용은 내 JavaScript 기능이 양식 요소의 ID와 충돌하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!