원생javascript는 어떻게 공유onload 이벤트를 실현합니까

작업할 때, 우리는 하나의 요소에 이벤트를 연결했습니다.dom가 아직 불러오지 않았을 때, js 코드를 실행하면 연결에 성공하지 못할 것입니다.일반적인 솔루션은 다음과 같습니다.
window.onload = EventFunction;
하지만 두 가지 사건이 있다면,
  • window.onload = EventFunction1;
  • window.onload = EventFunction2;
  • 그 2는 1을 대체할 것이다. 이때 모든 사건 처리 판서는 하나의 지령만 귀속할 수 있다고 생각할 수도 있다.이 난제를 피할 수 있는 방법은 다음과 같다. 먼저 익명 함수를 만들어서 이 두 함수를 수용한 다음에 그 익명 함수를 onload 이벤트에 연결할 수 있다.
    
    window.onload = function(){
     firstFunction();
     secondFunction(); 
    }
    그것은 확실히 잘 작동할 수 있다. 귀속이 필요한 함수가 많지 않은 상황에서 가장 간단한 해결 방안이 될 것이다.
    페이지에 불러올 때 몇 개의 함수를 실행하든지 간에 유연성이 가장 좋은 해결 방안이 있다.이 방안은 함수를 윈도우에 연결하는 코드를 추가로 작성해야 한다.onload 사건은 아주 쉬워요.
    이 함수의 이름은 addLoadEvent입니다. Simon Willison이 썼습니다.페이지에 불러올 때 실행할 함수의 이름만 있는 매개 변수입니다.
    다음은 이 함수가 수행할 작업입니다.
    1. 기존 윈도우.onload 이벤트 처리 함수의 값을 변수oldonload에 저장하기;
    2. 이 처리 함수에 어떤 함수도 귀속되지 않으면 평소처럼 새 함수를 추가합니다.
    3. 이 처리 함수에 일부 함수가 귀속되어 있으면 기존 지령의 끝에 새 함수를 추가합니다.
    
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if(typeof window.onload != 'function'){
          window.onload = func;
        }else{
          window.onload = function(){
            oldonload();
            func();
          }
        }
      }
    이것은 페이지가 불러올 때 실행되는 함수를 하나의 대기열로 만들 것입니다.아까 그 두 함수를 대기열에 추가하려면 다음 코드만 쓰면 됩니다.
    addLoadEvent(firstFunction);
    addLoadEvent(secondFunction);
    나는 이 함수가 매우 실용적이라는 것을 발견했다. 특히 코드가 갈수록 복잡해질 때.페이지가 불러올 때 몇 개의 함수를 실행하든지 간에 문장 하나만 정하면 모든 것을 안배할 수 있다.
    이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.

    좋은 웹페이지 즐겨찾기