- 이벤트 덮어쓰기 vs 이벤트 누적
onclick은 이벤트를 여러개 적용하는 것이 불가능하다. 만일 onclick 이벤트 핸들러를 이미 사용한 상태에서 새로운 onclick 이벤트를 추가한다면 추가된 이벤트가 기존의 이벤트를 덮어쓴다.
addEventListener는 여러 이벤트를 추가하더라도 누적되어 모든 이벤트가 동작된다.
onclick에는 하나의 콜백만 지정할 수 있지만, addEventListener를 사용하면 여러 개의 이벤트 리스너를 추가할 수 있다. 따라서 만약 onclick 이벤트 핸들러를 두 번 이상 사용한다면, 기존 이벤트 핸들러를 덮어쓰기 때문에 가장 아래에 추가한 핸들러만 제대로 작동한다. 반면, addEventListener는 기존 이벤트 핸들러를 덮어 쓰지 않고 얼마든지 계속해서 핸들러를 추가해도 모든 핸들러가 정상적으로 작동한다.
- 브라우저 호환성
그럼 onclick은 왜 있는거야?
이쯤 되면 이런 의문이 들 수 있다.
클릭 이벤트를 주고 싶으면 그냥 addEventListener를 사용하면 되지, onclick은 굳이 왜 만든 것일까?
onclick은 초기 DOM Level-0에서 제공하던 기능이고, 그 이후 버전인 Level-2에서 추가된 것이 addEventListener이다.
addEventListener는 이벤트 캡쳐링, 버블링 같은 이벤트 방식을 설정할 수 있기 때문에 이벤트 제어에 있어서 더욱 유용하지만, addEventListener는 IE8 이하에서는 작동을 하지 않는다. 그래서 구형 브라우저 지원이 필요하면 onclick을 사용하거나 다른 방법을 찾아야 한다.
