HTML에서 요소가 클릭되었을 때 스크립트를 실행하려면 onclick 속성을 사용하면 됩니다. 이 속성은 버튼, 링크, 이미지 등 대부분의 HTML 요소에 적용할 수 있으며, 사용자가 해당 요소를 클릭하는 순간 지정된 JavaScript 코드나 함수가 자동으로 실행됩니다.
기본 문법
<요소 onclick="실행할_스크립트"> 형태로 작성하며, 속성 값에는 JavaScript 코드 또는 함수 호출을 지정합니다.
예제
다음 코드를 실행하여 onclick 속성이 실제로 어떻게 동작하는지 확인해 보세요. 버튼을 클릭하면 화면에 메시지가 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<button onclick = "display()">Click</button>
<p id = "test"></p>
<script>
function display() {
document.getElementById("test").innerHTML = "You clicked the button!";
}
</script>
</body>
</html>위 예제에서는 버튼에 onclick="display()"를 지정했습니다. 따라서 사용자가 버튼을 클릭하면 display() 함수가 호출되고, 이 함수는 id가 "test"인 <p> 요소의 내용을 "You clicked the button!"이라는 텍스트로 변경합니다.
참고 사항
HTML 태그 안에 직접 이벤트 핸들러를 작성하는 방식은 간편하지만, 코드의 가독성과 유지보수성을 고려하면 JavaScript 파일에서 addEventListener('click', 함수) 메서드를 사용해 이벤트를 연결하는 것이 더 권장됩니다. 다만 간단한 데모나 학습 목적이라면 onclick 속성만으로도 충분히 활용할 수 있습니다.