[💡]onclick과 addEventListener 차이

onclick과 addEventListener의 가장 큰 차이는 덮어쓰기와 누적이다.

먼저 onclick은 하나의 요소에 클릭 이벤트를 걸어줄 때마다 기존에 걸려있던 클릭 이벤트가 덮어쓰여지며 하나의 콜백만 지정할 수 있다.

반면에 addEventListener은 하나의 요소에 클릭 이벤트를 누적해서 걸어줄 수 있으며 여러 개의 이벤트 리스너를 추가할 수 있다.

💡 따라서 만약 onclick 이벤트 핸들러를 두 번 이상 사용한다면, 기존 이벤트 핸들러를 덮어쓰기 때문에 가장 아래에 추가한 핸들러만 제대로 작동하지만
addEventListener는 기존 이벤트 핸들러를 덮어 쓰지 않고 얼마든지 계속해서 핸들러를 추가해도 모든 핸들러가 정상적으로 작동한다.

예시

var btn = document.getElementById('btn');

btn.onclick = function() {
  alert('onclick-1');
}

btn.onclick = function() {
  alert('onclick-2');
}
//이렇게 하면 onclick-2만 작동한다

btn.addEventListener('click', function() {
  alert('addEventListener-1');
});

btn.addEventListener('click', function() {
  alert('addEventListener-2');
});
//addEventListener-1,2 모두 작동한다.

그럼 onclick은 왜 있을까?

onclick은 초기 DOM Level-0에서 제공하던 기능이고, 그 이후 버전인 Level-2에서 추가된 것이 addEventListener이다.

addEventListener는 이벤트 캡쳐링, 버블링 같은 이벤트 방식을 설정할 수 있기 때문에 이벤트 제어에 있어서 더욱 유용하지만, addEventListener는 IE8 이하에서는 작동을 하지 않는다. 그래서 구형 브라우저 지원이 필요하면 onclick을 사용하거나 다른 방법을 찾아야 한다.