프레임워크 없이 Javascript에서 DOM 준비 이벤트를 감지하는 방법은 무엇입니까?

프레임워크 없이 Javascript DOM 지원 이벤트 감지

Javascript에서 개발자는 특정 작업을 수행하기 위해 window.onload 이벤트에 함수를 연결하기 위해 Prototype 또는 jQuery와 같은 프레임워크를 사용하는 경우가 많습니다. . 그러나 이러한 프레임워크를 사용하지 않고 이를 달성할 수 있는 다른 방법이 있습니다.

Javascript의 문서 개체에는 AJAX 요청의 ReadyState 속성과 유사하게 페이지의 로딩 단계를 나타내는 ReadyState 속성이 있습니다. ReadyState 속성은 다음 값을 가질 수 있습니다.

• loading - 페이지가 여전히 로드 중이고 DOM 요소를 아직 사용할 수 없습니다.
• interactive - 페이지가 로드되고 DOM 요소가 대부분 상호 작용할 준비가 되었지만 이미지와 기타 리소스는 아직 로드 중일 수 있습니다.
• complete - 페이지가 완전히 로드되었으며 모든 DOM 요소를 사용할 수 있습니다.

DOM이 준비되었는지 감지하려면 , 다음 코드를 사용할 수 있습니다.

<code class="javascript">function fireOnReady() { /* ... */ }
if (document.readyState === 'complete') {
    fireOnReady();
} else {
    document.addEventListener("DOMContentLoaded", fireOnReady);
}</code>

이 코드는 페이지가 이미 완전히 로드되었는지(readyState가 '완료'임) 확인하고 즉시 fireOnReady 함수를 실행합니다. 그렇지 않으면 DOM이 준비되면 실행되는 DOMContentLoaded 이벤트에 콜백을 연결하고 fireOnReady 함수를 실행합니다.

또 다른 옵션은 jQuery의 문서화되지 않은 isReady 속성을 사용하는 것입니다.

<code class="javascript">if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}</code>

그러나 이 속성은 문서화되어 있지 않으며 향후 버전의 jQuery에서 제거될 수 있습니다.

궁극적으로 DOMContentLoaded 이벤트를 수신하는 것은 최신 브라우저에서 DOM이 준비되는 시기를 감지하는 가장 신뢰할 수 있는 방법입니다.

위 내용은 프레임워크 없이 Javascript에서 DOM 준비 이벤트를 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!