onclick 이벤트는 자바스크립트에서 가장 많이 사용되는 이벤트 유형으로, 사용자가 마우스 왼쪽 버튼을 클릭했을 때 발생합니다.
onclick 이벤트의 주요 활용
이 이벤트를 활용하면 버튼 클릭 시 다양한 동작을 실행할 수 있습니다. 대표적인 활용 사례는 다음과 같습니다.
- 폼 제출 전 입력값 유효성 검사
- 사용자에게 경고 메시지 표시
- 버튼 클릭에 따른 특정 함수 호출
- 화면 요소의 동적 변경 및 상호작용 처리
기본 예제
아래 예제는 버튼을 클릭하면 sayHello() 함수가 호출되어 알림 창이 표시되는 간단한 코드입니다.
<html>
<head>
<script>
function sayHello() {
alert("Hello World");
}
</script>
</head>
<body>
<p>아래 버튼을 클릭하고 결과를 확인해 보세요.</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>
</body>
</html>
코드 설명
<head> 영역의 <script> 태그 안에 sayHello() 함수를 정의합니다. 이 함수는 alert()을 통해 "Hello World"라는 메시지를 화면에 띄웁니다.
<body> 안의 버튼에는 onclick="sayHello()" 속성이 지정되어 있어, 사용자가 버튼을 클릭하는 순간 해당 함수가 자동으로 실행됩니다.
마무리
onclick 이벤트는 자바스크립트 이벤트 처리의 기본이 되는 핵심 개념입니다. 버튼 클릭뿐만 아니라 이미지, 링크 등 다양한 HTML 요소에 적용할 수 있으므로, 웹 페이지에 풍부한 상호작용을 추가하고 싶다면 반드시 익혀두어야 할 기능입니다.