addEventListener()과 onclick()의 차이

웹을 구현할 때 Click 이벤트를 구현하는 방법이 두 가지가 있다.
addEventListener('click', () => {} 이렇게 이벤트 리스너를 추가하는 방법과
onclick() HTML에 onClick을 더해주는 방법!

onclick이 더 간단한 것 같고, onclick이 가능한 곳에서 왜 addEventListener을 사용하나 궁금해서 문서를 작성하게 되었다.

브라우저 호환성

Onclick 메서드는 모든 버전에서 호환되지만,
AddEventListener는 IE에서 호환되지 않는다.

버블링, 캡처링 설정 가능 여부

Onclick 메소드는 구현할 기능인 함수만 받지만,
AddEventListener는 3번째 파라미터로 버블링, 캡쳐링 동작 여부를 결정할 수 있다.
boolean 값으로 true를 설정하면 버블링, false를 설정하면 캡쳐링으로 동작된다.
(기본값은 false 이다.)

여러 이벤트 등록 가능 여부

onclick은 한 element 당 하나만 등록이 가능하지만,
AddEventListener는 여러 개를 등록할 수 있다.
관리측면에서 AddEventListener가 더 좋아 보인다.

결론

상황에 따라 다르긴 하겠지만,
현재는 AddEventListener가 더 모던하게 사용된다고 한다.
특히 성능 향상을 위해 이벤트 델리게이션을 사용할 때가 있는데 이때 AddEventListener이 사용되므로
AddEventListener를 지향하는 게 맞는 것 같다.