[javascript] 이벤트 핸들러 함수 등록하기
JavaScript에서 이벤트 핸들러 함수를 등록하는 방법에 대해 알아보겠습니다.
1. HTML 요소에 직접 이벤트 핸들러 등록하기
<button onclick="myFunction()">Click me</button>
위 예제에서 <button> 요소에 onclick 속성을 사용하여 myFunction 함수를 직접 등록했습니다. 이 방법은 간단하지만 유지보수가 어렵고, 여러 이벤트를 추가할 때에는 코드가 복잡해질 수 있습니다.
2. JavaScript 코드로 이벤트 핸들러 등록하기
<button id="myButton">Click me</button>
document.getElementById("myButton").addEventListener("click", myFunction);
위 예제에서 addEventListener 메서드를 사용하여 이벤트 핸들러 함수 myFunction을 click 이벤트에 등록했습니다. 이 방법은 HTML과 JavaScript를 분리하여 유지보수가 용이하고, 다수의 이벤트 핸들러를 등록할 수 있습니다.
3. jQuery를 사용하여 이벤트 핸들러 등록하기
<button id="myButton">Click me</button>
$("#myButton").on("click", myFunction);
위 예제에서는 jQuery를 사용하여 click 이벤트에 myFunction 함수를 등록했습니다. jQuery를 사용하면 간단한 코드로 이벤트 핸들러를 등록할 수 있습니다.
이렇게 JavaScript에서는 다양한 방법으로 이벤트 핸들러 함수를 등록할 수 있습니다. 코드의 유지보수성과 효율성을 고려하여 적합한 방법을 선택하는 것이 중요합니다.
참고 자료: