JS - 이벤트 핸들러란?

이벤트란 브라우저에서 사용자의 조작이나 환경의 변화로 벌어진 사건을 말하며 이러한 이벤트에 대해 즉각적인 반응을 할 수 있게 하는 것을 핸들러라 부릅니다.

브라우저에서 발생하는 이벤트를 요약하면 다음과 같습니다.

설 명
윈도우 이벤트	브라우저에 변화가 생겼을 때
마우스 이벤트	사용자가 마우스로 조작했을 때
키보드 이벤트	사용자가 키보드를 조작했을 때
폼 이벤트	폼 요소 조작에 의해 발생하는 이벤트
클립보드 이벤트	사용자가 복사, 자르기, 붙여넣기 할 때

이렇게 사용자의 조작으로 벌어진 이벤트를 자바스크립트가 모두 잡아낼 뿐 아니라 사용자에게 다양한 메시지를 보여줄 수 있습니다.

자바스크립트에서 주로 사용하는 방법은 다음 세 가지로 나눌 수 있습니다.

// 태그에 직접 이벤트를 넣는 방법
<a href="#" onclick="alert();">링크</a>

// 콜백 함수를 이용해 이벤트를 넣는 방법
객체.onclick = function() {
  alert();
}

// Dom Model 2 이벤트를 넣는 방법
// 이벤트 생성
객체.addEventListener(이벤트, 함수명);

// 이벤트를 삭제할 때
객체.removeEventListener(이벤트, 함수명);

event 객체

event 객체는 이벤트가 발생하면 자동으로 생성되는 객체로 다음 표를 사용할 수 있습니다.

속 성	설 명
target	이벤트를 일으킨 타겟의 요소를 반환
type	이벤트를 일으킨 이벤트 유형을 반환 (keydown 이벤트를 사용한 경우 keydown 값을 반환)
returnValue	이벤트의 작업을 중지. true | false 중 하나
button	마우스 버튼의 종류를 반환. (IE 전용) (window.event 객체 속성) 1: 왼쪽 버튼을 눌렀을 때 2: 오른쪽 버튼을 눌렀을 때 3: 왼쪽+오른쪽 버튼을 눌렀을 때 4: 가운데 버튼을 눌렀을 때 5: 왼쪽+가운데 버튼을 눌렀을 때 6: 오른쪽+가운데 버튼을 눌렀을 때 7: 왼쪽+가운데+오른쪽 버튼을 눌렀을 때
which	마우스 버튼의 종류를 반환. (event 객체 속성) 1: 왼쪽 버튼을 눌렀을 때 2: 가운데 버튼을 눌렀을 때 3: 오른쪽 버튼을 눌렀을 때
screenX	스크린 화면을 기준으로 마우스 x 좌표
screenY	스크린 화면을 기준으로 마우스 y 좌표
offsetX	이벤트가 발생한 DOM 객체를 기준으로 마우스 x 좌표
offsetY	이벤트가 발생한 DOM 객체를 기준으로 마우스 y 좌표
clientX	브라우저 창의 마우스 x 좌표
clientY	브라우저 창의 마우스 y 좌표
pageX	브라우저 창의 마우스 x 좌표 스크롤 화면을 포함한 전체 페이지
pageY	브라우저 창의 마우스 y 좌표 스크롤 화면을 포함한 전체 페이지

target 속성

이벤트를 일으킨 요소를 반환합니다.

<input type="text" name="user" id="user">

<script>
var btn = document.getElementById("user");
btn.addEventListener("keypress", func);

function func(e){
 console.log( e.target );
} // 결과: <input type="text" name="user" id="user">
</script>

type 속성

이벤트를 일으킨 이벤트 유형을 반환하는 속성입니다.

<input type="text" name="user" id="user">

<script>
var btn = document.getElementById("user");
btn.addEventListener("keydown", func);

function func(e){
 console.log(e.type);
} // 결과: keydown
</script>

retunValue 속성

우리는 보통 링크의 이동을 막기 위해 아래와 같이 작업을 할 것입니다.

<a href="http://habonyphp.com/ " onclick="return false;">홈</a>

그러나 아래와 같이 작업하면 이벤트를 중지시킬 수 있습니다.

<a href="http://habonyphp.com/ " onclick="mclick(event);">홈</a>   
<script>
function mclick(ev){
  ev.returnValue = false;
}
</script>

<a href="http://habonyphp.com/">홈</a>   
<script>
var btn = document.getElementsByTagName("a")[0];
btn.addEventListener("click", mclick);
function mclick(e){
  e.returnValue = false;
}
</script>

크로스 이벤트 핸들러 구현

대부분의 브라우저는 addEventListener() 를 지원하지만 안타깝게도 이러한 동작을 모든 브라우저가 동일한 방식으로 수행하지 않습니다. 특히 익스플로어 사용자라면 더욱 그렇습니다.

그래서 다음과 같이 함수를 만들어 사용하면 브라우저가 다르더라도 동일한 동작을 하게 할 수 있습니다.

// 이벤트를 등록할 때는...
function addEvent(node, event, handler){
  if(node.addEventListener){
    node.addEventListener(event, handler, false);
  }else{
    node.attachEvent("on" + event, handler);
  }
}

// 이벤트를 제거할 때는...
function removeEvent(node, event, handler){
  if(node.addEventListener){
    node.removeEventListener(event, handler, false);
  }else{
    node.detachEvent("on" + event, handler);
  }
}

여기서 또 다른 문제는 event 객체입니다. 대부분의 브라우저는 이벤트 객체를 인자로 전달합니다.

그런데, event 객체가 정의되지 않을 때가 있을 텐데, 이럴 때는 최상위 수준의 객체인 window.event 를 취하게 해서 이벤트 값을 얻을 수 있습니다.

<button id="user">홈</button>
<script>
var btn = document.getElementById("user");

addEvent(btn, "click", function(event){
  event = event || window.event; 
  console.log(event.x + ", " + event.y);

  alert("클릭했습니다.");
});

function addEvent(node, event, handler){
  if(node.addEventListener){
    node.addEventListener(event, handler, false);
  }else{
    node.attachEvent("on" + event, handler);
  }
}
</script>

한 요소에 이벤트 여러 개 추가하기

하나의 요소에 이벤트 핸들러를 여러 개 추가할 수 있습니다. 이 말은 한번 클릭하는 것만으로 여러 이벤트가 발생합니다. HTML 요소뿐만 아니라 DOM 객체에도 추가할 수 있습니다.

<!-- 버튼을 클릭하면 여러 이벤트가 발생해요. -->
<button id="msg">확인</button>

<script>
var btn = document.getElementById("msg");
btn.onclick = function(e){
  alert("버튼을 눌렀네요.");
}
btn.addEventListener("mouseover", overFunc);
btn.addEventListener("click", hello);

function hello(){
  alert("안녕 하보니");
}

function overFunc(){
  alert("마우스를 올렸네");
}
</script>

이벤트 예제

콜백 함수를 이용해 간단한 이벤트를 만들어 보겠습니다.

<!-- 버튼을 클릭하면 이벤트가 발생해요. -->
<button id="msg">확인</button>

<script>
var btn = document.getElementById("msg");
btn.onclick = function(e){
  // 대상 요소
  console.log(e.target);
  // 마우스로 클릭한 X 지점
  console.log(e.x);
  // 마우스로 클릭한 Y 지점
  console.log(e.y);
  // 브라우저 상단 지점에서 떨어진 거리 (픽셀)
  console.log(e.target.offsetTop);
  // 브라우저 왼쪽 지점에서 떨어진 거리 (픽셀)
  console.log(e.target.offsetLeft);

  alert("버튼을 눌렀네요.");
}
</script>

아래 글을 복사하기 하면 이벤트가 발생합니다.

<div>마우스로 이 글을 복사해 보세요.</div>

<script>
var drag = document.getElementsByTagName("div")[0];
drag.oncopy = function(){
  alert("글을 복사했네요.");
}
</script>

다음은 addEventListener() 에 대한 예제입니다.

<a href="#" id="btn">클릭해 보세요.</a>

<script>
var btn = document.getElementById("btn");
// 이벤트를 만듭니다. 
btn.addEventListener("click", event);

// 이벤트 리스너 제거는 이렇게 하세요.
// btn.removeEventListener("click", event);

function event(e){
  // 대상 요소
  console.log(e.target);
  // 마우스로 클릭한 X 지점
  console.log(e.x);
  // 마우스로 클릭한 Y 지점
  console.log(e.y);
  // 브라우저 상단 지점에서 떨어진 거리 (픽셀)
  console.log(e.target.offsetTop);
  // 브라우저 왼쪽 지점에서 떨어진 거리 (픽셀)
  console.log(e.target.offsetLeft);

 alert("버튼을 눌렀네요.");
}
</script>

창 크기를 바꾸면 이벤트가 발생합니다.

<script>
addEventListener("resize", event);

function event(){ alert("창 크기를 변경했네요."); }
</script>