[JavaScript] DOM 이벤트 핸들러 onclick과 onsubmit

개념

자바스크립트의 DOM을 공부하다보면, 이벤트 핸들러라는 개념을 쉽게 접할 수 있다.

이벤트 핸들러란, '어떤 이벤트를 실행했을 때, 해당 코드를 실행시켜라'에서 "어떤 이벤트"를 담당한다.

그중에서도 쉽게 접할 수 있는 게 onclick과 onsubmit인데, 처음 이벤트 핸들러를 접하는 사람의 경우 이 두 개념을 혼동할 수 있어서 쉽게 정리해보려고 한다.

 

onclick

<form id="form">
  <input type="checkbox" id="agree1"><span>동의1</span>
  <input type="checkbox" id="agree2"><span>동의2</span>
  <input type="checkbox" id="agree3"><span>동의3</span>
  <input type="submit" id="submit" value="submit">
</form>

submit.onclick = function (){
  if (agree1.checked && agree2.checked && agree3.checked){
    alert('제출이 완료되었습니다.')
  } else {
    alert('모두 동의해주세요.')
  }
}

onclick은 말그대로 '클릭 되었을 때'를 뜻한다. button이 될 수도 있고, 아무거나 이벤트 대상이 될 수 있다.

위의 코드를 보면 submit에 onclick을 했을 경우 함수를 실행하라는 코드인데, 사실 submit 타입이기 때문에 onsubmit으로 하는 게 적합하나 설명을 위해 onclick을 사용했다. 

 

onsubmit

form.onsubmit = function (){
  if (agree1.checked && agree2.checked && agree3.checked){
    alert('제출이 완료되었습니다.')
  } else {
    alert('모두 동의해주세요.')
    return false;
  }
}

onclick은 솔직히 이해할 것도 없이 너무 쉽기 때문에 헷갈리는 경우는 없다. 하지만 onsubmit은 직접 써본 게 아닌 이상 처음 접하면 onclick과 충분히 헷갈릴 수 있다. 

onsubmit은 form을 서버로 전송할 때 쓰이는 이벤트 핸들러로, 'form을 서버로 전송할 때'를 뜻하며 시간상 막 전송하기 바로 직전에 수행되는 이벤트 핸들러라고 이해하면 쉽다. 

 

위의 코드를 보면 onclick때와 다른 게 보일 것이다. 바로 onsubmit의 객체를 form으로 썼다는 점이다.

onclick은 클릭되는 대상을 객체로 가져다 썼다면, onsubmit은 무조건 form을 객체로 써야한다는 게 차이점이자 특징이다. 위 코드는 form을 서버로 전송하기 직전에, if 조건을 확인해보면서 alert를 실행한다는 뜻이다.

 

이벤트 핸들러 주의할 점

// 정상적으로 작동되지 않음
if (agree1.checked && agree2.checked && agree3.checked){
  submit.onclick = function (){
    alert('제출이 완료되었습니다.')
  }
} else {
  submit.onclick = function (){
    alert('모두 동의해주세요.')
  }
}

이벤트 핸들러를 쓸 때, 간혹 함수나 조건문 안에 넣어 실행하려고 하는 경우가 있을 수도 있다.

위의 코드는 onclick때 썼던 코드를 if문 안 onclick을 넣어 만든 코드이다. 실행해보면 if문의 조건에 적합해도 계속 else의 실행문만 작동한다. 이것은 자바스크립트의 특징인 위에서 아래로 코드를 실행한다는 점에서 위의 onclick이 아래의 onclick에 덮어 씌워져서 계속 else만 실행되는 것이다.

 

따라서 이벤트 핸들러를 쓸 때는 웬만하면 아래에 중복되는 것이 없게 하기 위해 최상단에 올리고, 그 아래에 이벤트 동작의 조건문과 함수 등을 적는 게 좋을 것이다.