[Javascript] 이벤트 처리 방법 onClick vs EventListener 차이점

Button을 클릭 후, 실행할 함수를 정의하기 위해선 onClick 혹은 eventListener로 함수를 정의할 수 있다.

그러면 다음 두가지의 차이점을 무엇일까?

 

onClick의 경우는 하나의 콜백만 지정할 수 있으나, EventListener의 경우에는 여러 개의 콜백을 지정할 수 있다.

 

onClick

onClick 이벤트 핸들러를 두번 사용하게 되면 가장 나중에 선언한 이벤트 핸들러가 작동하게 된다.

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

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

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

즉, 다음 코드를 실행할 경우, alert 창에 'onclick-2'가 한번만 뜨게 된다.

 

Event Listener

Event listener의 경우는 여러 개의 콜백 함수가 지정이 가능하기 때문에, 

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

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

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

다음 코드를 실행할 경우, 'addEventListener-1', 'addEventListener-2'가 알람창에 두번 뜨게 된다.

 

굳이 이벤트 처리방법이 두 가지인 경우는..

onClick은 초기 DOM Level-0에서 제공하던 기능이고, EventListener는 추후에 나온 DOM Level-2에서 추가된 기능이다. Event Listener를 통해 이벤트 캡쳐링, 버블링 같은 이벤트 처리 방법을 제어할 수 있다. 하지만 익스플로러 8과 그 이전버전에선 지원하지 않는다.

 

 

참고 사이트

- [JS] onClick과 addEventListener 비교: https://jess2.github.io/2018/05/15/JavaScript/JS-onclick%EA%B3%BC-addEventListener-%EB%B9%84%EA%B5%90/

- React onClick event vs JS addEventListener - Linguine Code: https://linguinecode.com/post/react-onclick-event-vs-js-addeventlistener