웹프로그래밍을 할 때, 개발자는 고객이 브라우저에서 언제 어떻게 행동할지 모른다. 그래서 특정 행동이 발생했을 때 실행시킬 함수를 브라우저에 등록해 둔다. 이때의 함수를 이벤트 핸들러(event handler)라고 부른다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 핸들러 예제</title>
</head>
<body>
<button id="myButton">클릭하세요</button>
<script>
// 버튼 요소를 가져옵니다.
var button = document.getElementById("myButton");
// 클릭 이벤트에 직접 함수를 작성하여 등록합니다.
button.addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});
</script>
</body>
</html>
여기서 구성요소들을 구체적으로 살펴보면 다음과 같다.
이벤트 타깃 : button
이벤트 타입 : click
이벤트 핸들러 :
function() {
alert("버튼이 클릭되었습니다.")
}