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

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

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

Window page load event

window.
onload
 = function() {}或者 window.addEventListener('
load
', function() {});

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

참고:

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

• window.addEventListener('load', function() { }) 사용에는 제한이 없습니다.

• document.addEventListener(
  'DOMContentLoaded'
  , function() { })

  DOMContentLoaded 이벤트가 트리거되면

DOM이 로드될 때만 스타일 시트, 그림, 플래시

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

창 크기 조정 이벤트

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

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

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

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

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

3f1c4e4b6b16bbbd69b2ee476dc4f83a
      window,addEventListener('resize',function(){
          console.log(window.innerWidth);
      })
     2cacc6d41bbb37262a98f745aa00fbf0

추가됨: pageshow 이벤트

, 이 이벤트

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

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

예는 다음과 같습니다.

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

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

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

le9 위 항목만 지원됩니다.

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

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
    93f0f5c25f18dab9d176bd4f6de5d30e
        a80eb7cbb6fff8b0ff70bae37074b813
        b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
        46d5fe1c7617e3914f214aaf043f4ccf

        531ac245ce3e4fe3d50054a55f265927
        8019067d09615e43c7904885b5246f0a

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

        window.addEventListener('load', function() {
 
            alert(22);
        })

        document.addEventListener('DOMContentLoaded', function() {
                alert(33);
            })
    
        2cacc6d41bbb37262a98f745aa00fbf0
    9c3bca370b5104690d9ef395f2c5f8d1
    6c04bd5ca3fcae76e30b72ad730ca86d    
        a5d9cc459240d83bcb5c71b35fa6d7f1请点击65281c5ac262bf6d81768915a4a77ac0
        
    36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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

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

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

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

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

,

web front-end

】

위 내용은 JavaScript 인스턴스 분석 창 페이지 로딩 이벤트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!