js_이벤트 핸들러

이벤트(Event)란 웹에 구현되어 있는 기능들을 말하는데, 대표적으로 클릭(onclick), 더블클릭(ondbclick), 마우스 올리기(hover)등이 있다. 이런 이벤트들이 일어났을 때 어떤 작업을 실행해주는 코드를 이벤트 처리기라고 하고, 이벤트 처리기 안에는 이벤트 리스너와 핸들러가 있는데, 이 중 여기서 알아볼 것은 이벤트 핸들러(Event Handler)이다. 이벤트 핸들러는 하나의 요소에 하나의 이벤트를 처리해 준다고 생각하면 된다.
이벤트 핸들러를 설정하는 방법에는 크게 두 가지가 있다. 그중 하나인 HTML 요소에 설정하는 방법은

<button onclick="click();">

이렇게 설정하면 버튼이 클릭되었을 때 JS에서 선언된 click() 함수가 실행될 것이다.
다른 방법으로는 DOM 요소 객체에 설정하는 것인데, 말이 좀 어렵지만 JS에서 HTML 요소를 가져와서 설정해 준다고 보면 된다. 그러니까

<input id="btn" type="button" value="click">

이런 input 요소가 있다고 하면 JS에서는

var btn = document.getElementById("btn");
btn.onclick = function() {
  document.write("you clicked button");
}

이와 같은 문법으로 사용할 수 있는 것이다.