모든 주요 웹 브라우저에서 지원하는 이벤트 수신기를 연결하는 방법

Question

모든 이벤트에서 인기있는 브라우저에서 작동하는 코드를 작성해야합니다. 검색을 한 후에 나는 다음과 같은 함수를 가지고 나왔다.

function addListener(event, thefunction) 
{ 
    if(window.addEventListener) 
    { 
     //All browsers, except IE before version 9. 
     window.addEventListener(event, thefunction, false); 
    } 
    else if(window.attachEvent) 
    { 
     //IE before version 9. 
     window.attachEvent(event, thefunction); 
    } 
} 

아주 간단하고 자명하다.

DOMContentLoaded 이벤트에 문제가있을 수 있습니다. IE (AFAIK)의 버전이 인식하지 못하므로 개발자는 onreadystatechange을 사용해야합니다.

event = (event == 'DOMContentLoaded') ? 'onreadystatechange' : "on" + event; 

이 부분은 항상 인터넷 익스플로러의 모든 버전에서 해고되었고,이 라인은 간단한 제공 : 인터넷 익스플로러 9. 당신은 else if(window.attachEvent) 만 추가 라인을 작성했다 때까지이 문제를 해결하는 것은, 아주 간단한 것 같다 이벤트 이름의 번역. 올바른 이름이 항상 사용되었습니다.

하지만 Internet Explorer 9 (이상)은 어떻게됩니까? 마이크로 소프트는 attachEvent을 addEventListener에 찬성한다고 결정했다. 그러나 onreadystatechange을 DOMContentLoaded으로 변경하지 않았습니다. 이 다른 브라우저에 대해서도 onreadystatechange 이벤트에 DOMContentLoaded를 다시 그들이 DOMContentLoaded를 사용할 때,이 실패 때문에

나는 window.addEventListener 부분에 선을 초과하여 사용할 수 없습니다.

이 문제를 해결하는 유일한 방법은 브라우저 검색 (유형 및 버전)을 window.addEventListener 부분에 추가하는 것이며 스크립트가 IE 9 이상을 처리하고 있음을 감지하면 DOMContentLoaded에서 다음으로 이벤트 이름을 다시 작성합니다. onreadystatechange (IE에 필요한 다른 이벤트 이름을 on으로 보완), 다른 브라우저의 경우 이벤트 이름은 변경되지 않습니다.

방금 ​​테스트 한 결과 DOMContentLoaded도 아니고 onreadystatechange도 내 IE 8 (첫 번째 오류는 FF/Chrome에서 올바르게 발생 함)에서 발생했기 때문에 잘못된 것 같습니다.

jQuery의 .on() 기능 (또는 이와 유사한 기능)은 어떻게됩니까? 누구든지, 교차 브라우저를 지원하는 경우 DOMContentLoaded 첨부, 그래서이 특정 종류의 이벤트가 내 스크립트, 상관없이 어떤 브라우저 또는 버전을 사용하고 있는지 확인할 수 있습니다 알고 있습니까?

Answer 1

DOMContentLoaded는 기본적으로 IE9에 이상이 지원되며, 또한 IE9에 구현 된 W3C 표준 addEventListener 방법으로 부착 할 수 있습니다

document.addEventListener('DOMContentLoaded', function() { 
    console.log('DOM ready'); 
}, false); 

버전 9에서 모든 최신 브라우저와 IE에서 작동 할 것이다 쪽으로.

jQuery 1.x는 IE6 + 및 기타 최신 업데이트 브라우저와 호환됩니다.

$(function() { 
    //DOM has loaded, put your code here 
}); 

---

.on()이 event delegation을 제공하지만 그 질문에 오히려 관련되지 않은 : jQuery를이 DOM ready handler을 통해 IE6-8에 대한 지원을 shimming하여 DOM ready 이벤트 크로스 브라우저를 연결할 수 있습니다.

Answer 2

IE9는 DOMContentLoaded를 지원합니다. here을 참조하십시오.

이 점을 염두에두고 addEventListener이 지원되는 경우 DOMContentLoaded도 마찬가지입니다.

(* 오페라 8 또는 사파리 3.0을 사용하는 다른 사람이 내 페이지를 방문하지 않는 경우는 거의 없습니다.)

jQuery의 경우 DOMContentLoaded가 지원되는 곳으로 넘어가지만 그렇지 않은 경우에는 DOM 트리를 반복적으로 검사하여 document.body이 있는지를 확인하는 DOM 준비 상태를 감지 할 수 있습니다. on()를 사용하지 않고도

$(function() { 

: 그래서 당신은 단지 그것의 DOM 준비 처리기를 사용할 수 있습니다.

jQuery가 수행하는 작업에 대한 자세한 정보 in this answer.