onClick vs addListener("click")

onClick

• 하나의 콜백만 지정할 수 있다.
• 이벤트 핸들러를 두 번 이상 사용한다면, 기존 이벤트 핸들러 덮어씀으로 마지막에 추가한 핸들러만 제대로 작동 한다.

addEventListener

• 여러 개의 이벤트 리스너를 추가할 수 있다.
• 계속해서 핸들러를 추가해도 모든 핸들러가 정상작동 함.
• 이벤트 캡쳐링, 버블링 같은 이벤트 방식을 설정 할 수 있어, 제어에 있어 더 유용함.
• IE8 이하에서는 작동하지 않음.

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