업데이트:

Javascript 작업, 특히 event 관련 코드를 짜다가 구글링을 할 때면 자주 보이는 코드가 있는데, e = e || window.event와 e.returnValue = false라는 녀석이다. 도대체 정체가 무엇인가 싶어서 알아보고, 예시로 a 요소 클릭 시 기본 이벤트 무효화 스크립트를 짜보았음.

1

<a href="#" id="anchor">anchor</a>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var anchor = document.getElementById("anchor");

// IE 8 이하는 addEventListener 메소드를 지원하지 않으므로 분기를 해준다.
if (anchor.addEventListener) {
    anchor.addEventListener("click", function(e) {
        e.preventDefault();
    });

} else if (anchor.attachEvent) {
    anchor.attachEvent("onclick", function(e) {
        e = e || window.event;
        e.returnValue = false;
    });
}

평범한 브라우저는 이벤트 객체를 이벤트 핸들러의 매개변수로 전달하지만, IE 8 이하 버전은 전역객체의 property, 즉 window.event로 전달한다. 또한 기본 이벤트 무효화에 e.preventDefault() 메소드를 쓰는 게 정석이나 IE 8 이하에선 지원하지 않으므로 e.returnValue 속성값을 false로 지정해줘야 이벤트를 처리할 수 있게 된다.

IE 8 이하 버전을 대응하되 분기하지 않으려면 다음과 같이 작성해주면 된다.

1

e.preventDefault ? e.preventDefault() : e.returnValue = false;

Hero image from geralt