자바스크립트와 HTML의 상호작용은 사용자나 브라우저가 페이지를 조작할 때 발생하는 이벤트(Event)를 통해 처리됩니다.
페이지가 로드되는 것도 하나의 이벤트이며, 사용자가 버튼을 클릭하는 행위 역시 이벤트입니다. 그 외에도 키보드의 특정 키를 누르거나, 창을 닫거나, 창 크기를 조절하는 등 다양한 동작이 모두 이벤트에 해당합니다.
특히 onclick() 이벤트는 사용자가 마우스 왼쪽 버튼을 클릭했을 때 발생합니다. 폼 유효성 검사, 경고 메시지 표시 등 필요한 로직을 이 이벤트 유형에 연결하여 손쉽게 처리할 수 있습니다.
예제
아래 예제 코드를 실행해 보면, 버튼 클릭 시 자바스크립트 함수가 어떻게 호출되는지 직접 확인할 수 있습니다.
<html>
<head>
<script>
<!--
function sayHello() {
alert("Demo Alert")
}
//-->
</script>
</head>
<body>
<p>아래 버튼을 클릭하고 결과를 확인해 보세요</p>
<form>
<input type="button" onclick="sayHello()" value="클릭" />
</form>
</body>
</html>