JavaScript에서 event를 쓸 때 고려해야 할 IE만의 차이점들

JavaScript, Notes 댓글 달기
  • IE에서는 event listeners를 붙이거나 없앨 때, addEventListener/removeEventListener 대신에, attachEvent/detachEvent를 쓴다.
  • IE에서는 event 이름의 형식이, event가 아닌, onevent 형식을 쓴다.
  • IE에서는 event object를 해당 listener의 한 전달 변수(argument)로 돌려주지 않아서, 대신 global event 변수를 써서 접근해야 한다.
  • event 발생시 기본적으로 주어진 action이 실행되는 것을 막으려면 preventDefault method를 쓰는 것이 정석이지만, IE에서는 event object의 returnValue 속성 값을 false로 지정해 주어야 한다.
  • IE는 event 전달 과정(propagation) 중에서 보통 맨 처럼 진행되는 capture phase를 지원하지 않는다.
  • 다른 객체들로의 event 전달 과정을 멈추려면, stopPropagation method를 쓰는 대신에, event object의 cancelBubble 속성 값을 true로 지정해 줘야 한다.

  • IE에서는 event listeners를 method가 아닌 독립된 function으로 불러와서, event를 일으킨 target element를 알아볼 때 간단한 this 키워드를 쓸 수가 없고, 대신에 여러 단계의 상당히 복잡한 과정을 거처야만 얻을 수 있다.

    if (typeof element.addEventListener != "undefined") {
      element.addEventListener("event", eventListener, false);
    } else if (typeof element.attachEvent != "undefined") {
      var thisListener = function() {
        var event = window.event;
        if (Function.prototype.call) {
          eventListener.call(element, event);
        } else {
          target._currentListener = eventListener;
          target._currentListener(event);
          target._currentListener = null;
        }
      };
      element.attachEvent("onevent", thisListener);
    }
  • IE에서는 어느 한 element의 event listener가 DOM에 속해있는 또 다른 node의 reference를 포함하고 있을 경우, 사용자가 다른 페이지로 이동하더라도 해당 listener와 함께 관련된 DOM node들이 메모리에서 지워지지 않고 상주하게 된다. (IE 6의 memory leak 현상은 근래에 있었던 보안 패치에도 불구하고 여전한 듯.)

프휴~ 🙁

꼬리표:

관련된 주제의 글

댓글을 남겨 주세요