onclick과 addEventListener 차이

steadygo247·2022년 6월 15일
2

알게된 것💡

목록 보기
1/1

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을 사용하거나 다른 방법을 찾아야 한다.

profile
Today is the first day of the rest of your life.

0개의 댓글