HTML 버튼으로 JavaScript 함수 호출하기
웹 개발에서 버튼 클릭과 같은 사용자 동작에 반응하여 JavaScript 함수를 실행하는 것은 가장 기본적이면서도 중요한 기술입니다. HTML 버튼을 사용해 JavaScript 함수를 호출하는 대표적인 방법들을 소개합니다.
1. 인라인 이벤트 속성 사용하기
가장 간단한 방법은 HTML 태그에 직접 이벤트 속성을 작성하는 것입니다. 아래 예제는 더블클릭 시 myFunction() 함수를 호출하는 버튼입니다.
<input id="Double Click here" type="button" value="clickme" ondblclick="myFunction();" />
이처럼 ondblclick, onclick, onmouseover 등의 이벤트 속성을 태그 안에 직접 넣으면 별도의 스크립트 연결 없이 즉시 함수를 실행할 수 있습니다.
2. DOM 프로퍼티로 이벤트 할당하기
HTML과 JavaScript 코드를 분리하고 싶다면 DOM 프로퍼티를 활용하는 방법이 좋습니다. 요소의 id를 통해 접근한 뒤 이벤트 핸들러를 할당합니다.
document.getElementById("Double Click here").ondblclick = myFunction;이 방식은 구조(HTML)와 동작(JavaScript)을 분리하므로 코드 유지보수에 유리합니다. 단, 함수 이름 뒤에 괄호 ()를 붙이지 않는 점에 주의하세요. 괄호를 붙이면 페이지 로드 시점에 함수가 즉시 실행되어 버립니다.
3. addEventListener() 활용하기 (권장)
현대적인 JavaScript 개발에서는 addEventListener() 메서드를 사용하는 것이 가장 권장됩니다. 하나의 요소에 여러 이벤트 리스너를 등록할 수 있고, 코드 관리도 훨씬 유연합니다.
document.getElementById("myButton").addEventListener("dblclick", myFunction);마무리
간단한 테스트나 학습용 코드라면 인라인 이벤트 속성이 편리하지만, 실제 서비스 개발에서는 addEventListener() 또는 DOM 프로퍼티 방식을 사용해 HTML과 JavaScript를 분리하는 것이 좋은 습관입니다. 상황에 맞는 방법을 선택해 깔끔하고 유지보수하기 쉬운 코드를 작성해 보세요.