JavaScript 인스턴스 분석 창 페이지 로딩 이벤트-JS 튜토리얼-php.cn

JavaScript 인스턴스 분석 창 페이지 로딩 이벤트

WBOY

풀어 주다： 2022-08-05 09:24:08

앞으로

2621명이 탐색했습니다.

이 글에서는 주로 윈도우 윈도우 이벤트를 소개하는 javascript에 대한 관련 지식을 제공합니다. window.onload는 윈도우(페이지) 로딩 이벤트입니다. 이 이벤트는 문서 내용이 완전히 로드될 때 발생합니다. 모든 사람에게 도움이 되기를 바랍니다.

JavaScript 인스턴스 분석 창 페이지 로딩 이벤트

[관련 추천: javascript video tutorial, web front-end]

Window page load event

window.
onload
 = function() {}或者 window.addEventListener(&#39;
load
&#39;, function() {});

로그인 후 복사

window.onload가 document 콘텐츠가 완전히 로드된 후에만 이벤트가 트리거됩니다(이미지, 스크립트 파일, CSS 파일 등 포함).

참고:

window.onload를 사용하면 페이지 요소 위에 js 코드를 작성할 수 있습니다. 왜냐하면 onload는 처리 기능을 실행하기 전에 모든 페이지 콘텐츠가 로드될 때까지 기다리기 때문입니다. Window.onload는 기존 등록 방법으로 한 번만 작성할 수 있습니다. 여러 개가 있는 경우 마지막 window.onload가 우선합니다.
window.addEventListener('load', function() { }) 사용에는 제한이 없습니다.

document.addEventListener(
&#39;DOMContentLoaded&#39;
, function() { })

로그인 후 복사

DOMContentLoaded 이벤트가 트리거되면

등은 제외됩니다. 페이지에 사진이 많으면 사용자 액세스부터 온로드 트리거까지 오랜 시간이 걸릴 수 있으며, 상호작용 효과를 얻을 수 없으므로 필연적으로 사용자 경험에 영향을 미치게 됩니다. DOMContentLoaded.

창 크기 조정 이벤트

window.onresize = funtion(){}
window.addEventListener("resize",funtion(){});

로그인 후 복사

window.onresize는 창 크기 조정 로딩 이벤트로

창 크기가 픽셀 단위로 변경될 때마다

실행되어 호출되는 처리 함수입니다. 이 이벤트는 반응형 레이아웃을 완성하는 데 자주 사용됩니다.

window.innerWidth 현재 화면의 너비입니다.

<script>
      window,addEventListener(&#39;resize&#39;,function(){
          console.log(window.innerWidth);
      })
     </script>

로그인 후 복사

추가됨: pageshow 이벤트

, 이 이벤트

는 페이지가 캐시에서 제공되는지 여부에 관계없이 페이지가 표시될 때

트리거됩니다. 새로 로드된 페이지에서는 로드 이벤트가 발생한 후 pageshow가 트리거됩니다. 이벤트 개체에 지속된 내용에 따라 캐시의 페이지에 의해 pageshow 이벤트가 트리거되는지 여부가 결정됩니다.

예는 다음과 같습니다.

window.onload는 창(페이지) 로딩 이벤트입니다. 문서 내용이 완전히 로드되면 이 이벤트가 발생합니다(이미지, 스크립트 파일, CSS 파일 등 포함). ), 처리 함수가 호출됩니다. window.onload를 사용하면 페이지 요소 위에 JS 코드를 작성할 수 있습니다. 왜냐하면 onload는 처리 함수를 실행하기 전에 모든 페이지 콘텐츠가 로드될 때까지 기다리기 때문입니다. 기존 등록 이벤트 방법은 한 번만 작성할 수 있습니다. 여러 개가 있는 경우 마지막 window.onload가 우선합니다.

addEventListener를 사용하면 제한이 없습니다.

DOMContentLoaded 이벤트가 트리거될 때만; 로드됨, 스타일 시트, 사진, 플래시 등 제외;

le9 위 항목만 지원됩니다.

페이지에 사진이 많으면 사용자 액세스부터 DOMContentl 로드 이벤트 발생까지 시간이 오래 걸릴 수 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

        </style>
        <script type="text/javascript">

        window.addEventListener(&#39;load&#39;, function() {
            var btn = document.querySelector(&#39;button&#39;);
            btn.addEventListener(&#39;click&#39;, function() {
                alert(&#39;点击我&#39;);
            })
        })

        window.addEventListener(&#39;load&#39;, function() {
 
            alert(22);
        })

        document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
                alert(33);
            })
    
        </script>
    </head>
    <body>    
        <button id = "btn1" >请点击</button>
        
    </body>
</html>

로그인 후 복사

Operation status; 이것은 DOM 로딩이 완료된 후 나타나는 팝업입니다.

버튼을 클릭하세요. addEventListener로 등록된 로딩 이벤트

HTML의 DOM querySelector() 메소드는 jQuery와 같은 추가 지원이 필요하지 않으며 구문은 jQuery와 유사합니다. 지정된 선택기와 일치하는 첫 번째 요소

이것은 처음 본 것 같습니다.

【관련 권장 사항: javascript 비디오 튜토리얼