1. 크로스 브라우징

과거에는 웹 페이지 개발 과정에서 다음과 같은 오류  및 해결방법 들이 있었음

문제
인터넷 익스플로러가 11버전으로 업데이트되면서,
인터넷 익스플로러(이하 IE 11) 11버전을 이용하는 사용자의 PC에서는
JavaScript 코드 중 attachEvent라는 문법이 갑자기 동작하지 않게 되는 문제가 발생

if (element.attachEvent) {
    element.attachEvent('onclick', handler); // IE 11에서는 에러 발생
}

원인
attachEvent는 인터넷 익스플로러(IE) 10버전 이하까지만 동작하던 문법으로, 과거에 이벤트를 부여할 때 사용되었음
IE 10버전까지는 문제없이 동작하지만, IE 11 버전과 같은 새롭게 업데이트된 버전부터는 attachEvent를 사용할 수 없게됨

해결
IE 10버전 이하 및 IE 11버전 이후 사용자를 모두 고려하기 위해 addEventListener 함수의 코드를 새롭게 추가

if (element.addEventListener) { // IE 11 이후
  element.addEventListener('click', handler);
} else { // IE 10버전 이하
  element.attachEvent('onclick', handler);
}

1. 배경

과거 1995년 경에는 넷스케이프 및 Microsoft에서 브라우저 소프트웨어에 대한 점유율을 높이고자 브라우저 경쟁 이 격화됨

따라서 하루가 다르게 각 브라우저 벤더사들은 최신 버전의 브라우저를 출시하면서 따라서 하루가 다르게 각 브라우저 벤더사들은 최신 버전의 브라우저를 출시하면서 서로 다른 스크립트 언어와 DOM API, 브라우저 전용 기능을 지속적으로 추가하게 됨

element.addEventListener("click", handler);

element.attachEvent("onclick", handler);

그에 따라 웹 표준이 정립되기 이전에는 각 브라우저 벤더사마다 독립적인 기능과 API를 가지게 되었음

2. 크로스 브라우징

브라우저를 통해 웹 서비스를 제공하던 제3자 회사들은 그때부터 두 개 이상의 브라우저(멀티 브라우저)에서 자신들의 서비스 기능이 모두 동작하도록 중복 코드 또는 조건 분기 코드를 작성해야 했음

이처럼 사용자들이 서로 다른 브라우저를 이용하더라도, 기능이 동일하게 동작하도록 하기 위해 고려해야하는 관심사를 크로스 브라우징(Cross browsing) 이라고 함

<button id="btn">Click</button>
<script>
var btn = document.getElementById("btn");
 
if (btn.addEventListener) {
    // Netscape, 표준 브라우저
    btn.addEventListener("click", function () {
        alert("clicked");
    });
} else if (btn.attachEvent) {
    // Internet Explorer
    btn.attachEvent("onclick", function () {
        alert("clicked");
    });
}
</script>

3. 요약

• 모바일 시장이 활성화되지 않았던 과거 1990년대에는 브라우저가 거대한 플랫폼의 형태로 등장하게 됨
• 브라우저 벤더별 경쟁이 심화되면서 동일한 기능이더라도 브라우저별로 프로그래밍 언어, 코드가 달랐음
• 웹 서비스를 개발하는 개발자는 서로 다른 브라우저에서도 동작하도록 코드를 최소 이중으로 작성해야 했으며, 이를 크로스 브라우징이라고 함