관리 메뉴

준호씨의 블로그

addEvent로 addEventListener, attachEvent 브라우저 호환성 개선 본문

개발이야기

addEvent로 addEventListener, attachEvent 브라우저 호환성 개선

준호씨 2008. 2. 19. 13:12
반응형
일단 결론 부터 말하자면 아래의 함수이다.

익스플로러에 대한 처리가 이전에 봤던 이벤트 처리랑 좀 다른게 있는데 정확한 이유는 모르겠다.

참고자료는 CDK Standard Magazine Forum 글을 참고했다.
http://forum.standardmag.org/viewtopic.php?id=1250

어찌 되었건 표준은 addEventListener 인데 IE에서는 attachEvent를 쓴다.
그래서 브라우저간 호환성 때문에 이러한 처리가 필요해진다. (아마 IE가 점유율이 높지 않았다면 IE가 패치를 해서 바꿔야 했겠지.)

그리고 IE에서는 이벤트를 붙일때 on을 넣어 주어야 한다. 나도 on이 익숙해져 있었는데 표준에서는 on이 없단다.

ps.
onload와 onLoad삽질 경험담...
X : addEvent(window, "load", onload); // onload 소문자로만 이루어진 onload 사용 불가
O : addEvent(window, "load", onLoad);


이상하게도 onload함수를 선언해서 사용해서 이벤트를 붙여서 쓰게 되니 정상적으로 동작하지 않는 경우가 발생하였다.
이런저런 이유가 있을듯 한데 참고 하기 바람



네이버 블로그에 올렸던 내용을 옮겨 오며 일부 수정 하였음
http://blog.naver.com/jworld2000/70027615982
반응형
4 Comments
  • 프로필사진 chamisak 2009.12.11 13:33 1.
    함수이름으로 이미 정해진 키워드는 대소문자를 다르게 하더라도 사용하지 않는 게 좋습니다.
    이는 습관의 문제입니다.

    2.
    elseif 블록의 경우, 브라우저에서 attachEvent를 지원하면
    else if (obj.attachEvent) {
    obj.attachEvent("on" + type, fn);
    }
    만으로 충분합니다.
    불필요한 obj["e"+type+fn] 과 obj[type+fn] 속성을 추가할 이유가 없습니다.

    addEventListener, attachEvent 둘 다 지원하지 않는(또는 허벌나게 오래된) 브라우저를 사용한다거나 하는 경우까지 고려한다면 아래처럼 써도 될 듯 합니다.

    function addEvent(obj, type, fn)
    {
    if (obj.addEventListener) {
    obj.addEventListener(type, fn, false);
    }
    else if ( obj.attachEvent ) {
    obj.attachEvent("on" + type, fn);
    }
    else {
    obj["on" + type] = fn; // same as "obj.onType = fn"
    }
    }
  • 프로필사진 Favicon of https://junho85.pe.kr BlogIcon 준호씨 2010.01.05 12:58 신고 1은 습관의 문제일수도 있겠지만 아무튼 콜백함수 지정 해 주는데 함수명을 같게 지정해 줘도 안된다면 onload가 for나 while 같이 예약어로 등록 되어 있을 수도 있을거 같네요.

    요즘은 익스플로러도 점점 표준을 지키고 있고 이 글 작성 당시에는 그냥 날 코딩 하느라 저런걸 만들었는데 그냥 jquery 등의 프레임웍을 가져다 쓰는게 편한거 같습니다.
  • 프로필사진 이재원 2011.06.08 17:13 참고로 focus이벤트의 경우 IE에서는 onfocus가 아니라 onfocusin로 써야합니다.. ^^
  • 프로필사진 Favicon of https://junho85.pe.kr BlogIcon 준호씨 2011.06.08 23:02 신고 좋은 정보 감사합니다. 아직 onfocus 이벤트는 써본적이 없네요. 테두리 강조 할때나 현재 선택된 입력창이 뭔지 알려 줄 때 유용할 거 같군요.
댓글쓰기 폼