JavaScript) onclick과 addEventListener의 차이

onclick과 addEventListener

• onclick은 초기 DOM level-0 에서 제공하던 기능으로 모든 브라우저 버전에서 사용 가능
• addEventListener는 DOM level-2에서 제공하는 기능으로 구형 브라우저에서 사용 불가

기본적으로 addEventListener를 사용하는 것이 모던한 방식이지만 구형 브라운저에서 click이벤트가 필요하다면 onclick으로 사용

onlcick

HTML 코드에서 inline 방식으로 onclick 속성에 작동할 함수 입력

• 모든 브라우저에서 사용 가능
• HTML코드에 JS코드 추가로 사용 가능 (가독성과 유지보수 면에서 약점을 갖는다)
• DOM.onclick 으로 사용 가능하지만 overwiriting이 불가하므로 기존 이벤트 핸들러가 있을 경우 덮어쓰게 됨
  (가장 마지막 핸들러만 작동)

addEventListener

• DOM.addEventListener("click", callback); 으로 사용
• 익스플로러 8 이하의 버전에서는 지원하지 않는다는 단점이 있다