onclick() vs addEventListener()

1 ROUND : 이벤트 추가

- onclick : 이벤트를 여러 개 적용 불가능. (기존 이벤트 덮어쓴다.)

- addEventListener : 여러 이벤트를 추가할 수 있다.

 

addEventListener 승리

 

2 ROUND : 브라우저 호환

- onclick : 모든 브라우저에서 호환 가능.

- addEventListener : IE 6,7,8 호환 X. 즉, 오래된 브라우저 지원 불가.

 

onclick 승리

 

3 ROUND : 버블링 / 캡쳐링

- onclick : 버블링만 가능.

- addEventListener : 세 번째 파라미터로 지정 가능. true : 캡처링, false : 버블링.

 

addEventListener  승리

 

결론

인라인 작성의 편리함이 있을 수 있지만 웬만하면 addEventListener()을 쓰자!!