🌱 기초 프론트엔드
onclick과 addEventListener의 차이
쉽게 이해하기
onclick은 전화기에 단축번호 하나만 저장하는 것이고, addEventListener는 여러 개의 연락처를 저장할 수 있는 스마트폰 같아요. onclick은 하나만 등록되지만 addEventListener는 같은 이벤트에 여러 함수를 연결할 수 있어요.
핵심 정리
HTML 요소에 클릭 이벤트를 연결하는 두 가지 방법의 차이를 알아봅니다.
자세히 알아보기
자바스크립트로 버튼 클릭 같은 이벤트를 처리하는 방법은 크게 두 가지예요. onclick 속성을 직접 지정하는 방법과 addEventListener 메서드를 쓰는 방법이죠.
onclick은 간단해요. button.onclick = function() { ... } 처럼 함수를 바로 할당하면 돼요. HTML에서 <button onclick="myFunction()"> 같은 방식으로 쓸 수도 있고요. 하지만 단점이 있어요. 하나의 요소에 onclick을 여러 번 지정하면 마지막 것만 남고 이전 것들은 사라져요.
addEventListener는 더 유연해요. 같은 요소에 여러 개의 이벤트 리스너를 등록할 수 있고, 나중에 removeEventListener로 제거할 수도 있어요. button.addEventListener('click', myFunction); 처럼 사용하죠. 실무에서는 대부분 addEventListener를 써요.
또 addEventListener는 이벤트 캡처링과 버블링 같은 고급 기능을 제어할 수 있어요. 큰 프로젝트에서 여러 스크립트가 동시에 동작할 때 onclick은 충돌이 날 수 있지만, addEventListener는 안전하게 공존할 수 있어요. 초보일 땐 onclick이 편하지만, 실무에서는 addEventListener를 배우는 게 좋습니다.