[JavaScript] onclick vs. addEventListener(’click’)

코드리뷰 받다가 알게된 사실 정리하기 ~.~

onclick

장점

1. 간단하고 직관적, 간결한 코드
2. 쉬운 구현

단점

1. 이벤트 핸들러 제한
   • 한 요소에 하나의 onclick 이벤트 핸들러만 설정 가능
   • 새로운 핸들러 추가 시 이전 핸들러가 덮어씌어짐
2. HTML과 JavaScript의 혼합
   • 구조와 동작이 혼합
   • 유지보수 및 테스트 어려워짐

addEventListener('click')

장점

1. 다중 이벤트 핸들러
   • 하나의 요소에 여러 이벤트 핸들러 추가 가능
   • 이벤트 핸들러끼리 충돌 X, 독립적 동작
2. 유연성
   • 이벤트 리스터를 동적으로 추가 및 제거 가능
   • 복잡한 애플리케이션에 적합
3. 이벤트 캡처링 및 버블링 제어
   • 이벤트 버블링 (Event Bubbling) : DOM 트리를 거슬러 올라가면서 상위 요소로 전파되는 것
   • 이벤트 캡처링 (Event Capturing) : DOM 트리의 최상위에서 시작하여 이벤트가 발생한 요소까지 내려가는과정
   • 캡처링 및 버블링 단계에서 이벤트를 처리할 지 여부 선택 가능

     <div id="parent">
         <button id="child">Click Me!</button>
     </div>

     // 이벤트 리스너를 버블링 단계에서 추가
     document.getElementById('child').addEventListener('click', function() {
         alert('버튼이 클릭되었습니다.');
     }, false); // 여기서 false는 버블링 단계에서 함수가 실행되어야 함을 나타냄
     
     // 이벤트 리스너를 캡처링 단계에서 추가
     document.getElementById('parent').addEventListener('click', function() {
         alert('부모 div가 클릭 캡처링을 통해 반응했습니다.');
     }, true); // 여기서 true는 캡처링 단계에서 함수가 실행되어야 함을 나타냄

단점

1. 복잡성: 초기 학습 곡선이 onclick 에 비해 다소 높음
2. 코드 길이 증가

어떤 것이 나을까?

• 유지보수, 확장성 중시한다면 → addEventListenr('click')
• 간단한 상황에서 빠르게 구현할 필요가 있다면 → onclick