자바스크립트 이벤트 핸들러 (Event Handlers)

09 Sep 2023

javascript

자바스크립트에서 이벤트 핸들러(event handler)는 특정 이벤트가 발생했을 때 실행되는 함수입니다. 이벤트 핸들러를 사용하면 웹페이지의 사용자 상호작용에 대응하여 원하는 동작을 수행할 수 있습니다. 자바스크립트에서는 다양한 이벤트 핸들러를 사용할 수 있으며, 자주 사용되는 몇 가지를 살펴보겠습니다.

1. onClick 이벤트 핸들러

onClick 이벤트 핸들러는 요소가 클릭되었을 때 실행되는 함수입니다. 예를 들어, 버튼을 클릭했을 때 어떤 동작을 수행하고 싶다면 onClick 이벤트 핸들러를 사용할 수 있습니다.

<button onclick="myFunction()">클릭하세요</button>

<script>
function myFunction() {
  alert("버튼이 클릭되었습니다!");
}
</script>

위의 코드에서는 버튼을 클릭하면 myFunction 함수가 실행되고 경고창이 뜨게 됩니다.

2. onSubmit 이벤트 핸들러

onSubmit 이벤트 핸들러는 폼(form)이 제출될 때 실행되는 함수입니다. 폼이 제출되기 전에 유효성 검사를 수행하거나 서버로 데이터를 전송하기 전에 필요한 작업을 수행할 수 있습니다.

<form onsubmit="return validateForm()">
  <input type="text" id="name" name="name">
  <input type="submit" value="제출">
</form>

<script>
function validateForm() {
  var name = document.getElementById("name").value;
  
  if (name == "") {
    alert("이름을 입력해주세요.");
    return false;
  }
  
  // 폼이 제출될 때 할 작업들...
}
</script>

위의 코드에서는 이름을 입력하지 않았을 경우에는 제출되지 않고, 경고창이 뜨게 됩니다. 그렇지 않은 경우에는 폼이 제출되며, validateForm 함수에서 추가적인 작업을 수행할 수 있습니다.

3. onLoad 이벤트 핸들러

onLoad 이벤트 핸들러는 웹페이지가 로드되었을 때 실행되는 함수입니다. 웹페이지의 모든 컨텐츠가 로드된 후에 추가적인 작업을 수행하거나 초기화 등의 동작을 수행할 때 사용할 수 있습니다.

<body onload="myFunction()">

<script>
function myFunction() {
  alert("페이지가 로드되었습니다!");
}
</script>

위의 코드에서는 페이지가 로드되면 myFunction 함수가 실행되고 경고창이 뜨게 됩니다.

결론

자바스크립트 이벤트 핸들러를 사용하면 웹페이지의 상호작용에 따라 동적인 동작을 추가할 수 있습니다. 여기서는 몇 가지 주요한 이벤트 핸들러를 살펴보았지만, 실제로는 더 다양한 이벤트 핸들러를 사용할 수 있습니다. 이벤트 핸들러를 사용하여 웹 애플리케이션을 더욱 다양하고 흥미로운 기능을 갖춘 사용자 친화적인 경험으로 만들 수 있습니다.