jQuery - 이벤트 핸들러 시작하기

제이쿼리는 자바스크립트의 이벤트 헨들러와 동일하게 동작합니다. 그러므로 여기서는 이벤트 헨들러를 어떻게 등록하는지, 어떻게 동작하는지에 대해 다룹니다.

제이쿼리에서는 윈도우 이벤트, 마우스 이벤트, 폼 관련 이벤트, 키보드 이벤트 등 자주 사용하는 이벤트 메소드를 제공합니다.

제이쿼리에서 이벤트를 등록하는 방법은 다음과 같습니다.

$(select).click( function );

$(select).on( "click ...,", function );

기존 자바스크립트에서는 이벤트 하나에 하나의 이벤트를 등록하거나 제거할 수 있었지만 제이쿼리는 다수의 이벤트를 한번에 등록할 수 있을 뿐 아니라 크로스 브라우징이 가능하여 많은 양의 소스 코드가 필요하지 않습니다.

제이쿼리는 .on() 메소드나 .bind(), .delegate() 메소드와 같이 몇 가지 이벤트 제어 메소드를 제공합니다.

메소드	설 명
.on()	형제 요소나 자식 요소에 하나이상의 이벤트를 등록. (동적으로 생성된 요소에 이벤트 등록이 가능) *1.7부터 사용 가능 하며 bind (), live () 및 delegate () 메소드를 대체하는 메소드*
.off()	.on() 메소드로 등록된 이벤트 해제
.live()	선택한 요소에 하나이상의 이벤트를 등록 (단, bind() 와는 달리 동적으로 생성된 요소에 이벤트 등록 가능)
.die()	.live() 메소드로 등록된 이벤트 해제
.bind()	선택한 요소에 하나이상의 이벤트를 등록 (단, 동적으로 생성된 요소에 이벤트 등록이 안됨)
.unbind()	.bind() 메소드로 등록된 이벤트 해제
.delegate()	선택한 요소의 하위 요소에 하나이상의 이벤트를 등록 (동적으로 생성된 요소에 이벤트 등록이 가능)
.undelegate()	.undelegate() 메소드로 등록된 이벤트 해제
.one()	선택한 요소에 하나 이상의 이벤트를 등록하며 이벤트 발생 후 자동으로 이벤트가 제거됨 (일회성 이벤트, 동적으로 생성된 요소에 이벤트 등록 가능)

.on() 이벤트 등록

on() 이벤트를 사용하면 .bind(), .live(), delegate() 기능을 한꺼번에 정의할 수 있습니다. 예를 들어 동적으로 생성된 요소에 접근할 수 있을 뿐 아니라 형제 요소나 자식 요소를 선택적으로 이벤트 등록이 가능합니다.

$(select).on( event, function );

$(select).on( event, [,child select] [,data] function);

선택 요소 이벤트 등록

선택한 요소에 'click' 이벤트를 등록합니다.

// on() 이벤트 예제
$("div#myid").on( "click", function(){
  alert('클릭했습니다.');
});


// bind() 이벤트 예제
$("div#myid").bind( "click", function(){
  alert('클릭했습니다.');
});


// click() 메소드 예제
$("div#myid").click(function(){
  alert('클릭했습니다.');
});

하위 요소 이벤트 등록

하위 요소에 이벤트를 등록하려면 .on() 나 .delegate() 메소드를 이용합니다. .on() 로 하위 요소를 선택하려면 위에 설명이 되어있듯 'child_select' 를 정의해 주어야 합니다.

아래 예제는 <div> 태그의 하위 요소 <a> 태그에 이벤트를 설정합니다.

// on() 이벤트 예제
$("div#myid").on( "click", 'a', function(){
  alert('클릭했습니다.');
});


// delegate() 예제
$("div#myid").delegate( 'a', "click", function(){
  alert('클릭했습니다.');
});

동적 요소 이벤트 등록

동적으로 생성된 요소나 속성에 이벤트를 등록하려면 delegate() 나 live(), on(), 그리고 one() 메소드를 이용합니다. 다시 말해 자바스크립트로 요소를 만들거나 속성을 추가, 복제한 요소에 접근할 수 있습니다.

// on() 이벤트 예제
$("div#myid").on( "click", 'a.child', function(){
  alert('클릭했습니다.');
});
$("a").addClass("child");


// delegate() 이벤트 예제
$("div#myid").delegate( 'a.child', "click", function(){
  alert('클릭했습니다.');
});
$("a").addClass("child");


// live() 이벤트 예제
$("div#myid a.child").live( "click", function(){
  alert('클릭했습니다.');
});
$("a").addClass("child");

<a> 요소를 동적으로 만들어 이벤트를 등록해 보겠습니다. .on() 메소드에만 이벤트를 등록해주었지만 동적으로 만들 수 있는 메소드는 모두 해당됩니다.

$("div#myid").on( "click", 'a', function(){
  alert('클릭했습니다.');
});
$("div#myid").append("<a href='#'>PHP</a>");

데이터 이벤트 등록

이벤트 데이터를 배열 객체로 넘겨주면 함수에서 매개변수로 받을 수 있습니다. 함수 내에서 받을 때는 매개변수를 "event" 로 정의하였다고 하였을때 "event.data.속성" 의 형식으로 받을 수 있습니다.

var event_data = {
  name: "하보니",
  age: "20"
};

// on() 이벤트 예제
$("div#myid").on( "click", event_data, function(e){
  alert( e.data.name + '(' + e.data.age + ')가 클릭했습니다.');
});


// bind() 이벤트 예제
$("div#myid").bind( "click", event_data, function(e){
  alert( e.data.name + '가 클릭했습니다.');
});

데이터 이벤트와 동적으로 <a> 요소를 만들어 이벤트를 등록합니다.

<script>
$(function(){

var event_data = {
  name: "하보니",
  age: "20"
};


$("div#myid").on( "click", 'a', event_data, function(e){
  alert( e.data.name + '가 클릭했습니다.');
});
$("div#myid").append("<a href='#'> PHP</a>")

});
</script>

<div id="myid">하보니</div>

N개 이벤트 등록

위 표에서 이벤트 등록할 때 하나 이상이라고 하였는데, 말 그대로 공백으로 구분하여 N개 이벤트를 등록할 수 있습니다. 형식은 다음과 같습니다.

$(select).on(
  'event1 event2 event3 ...', 
  function
);

폼 요소에 마우스를 올리거나 탭 키로 포커스 주었을 때 이벤트가 발생합니다.

<script>
$(function(){

 $("input#myid").on( "mouseover focus", function(){
  $(this).css("background", "red");
 });

});
</script>

<input id="myid" type="text" value="하보니">

마우스를 요소에 올리면 빨강색으로 변하고 벗어나면 흰색으로 변합니다.

<script>
$(function(){

 $("input#myid").on( "mouseover focus", function(){
  $(this).css("background", "red");

  $(this).on("mouseout", function(){
    $(this).css("background", ""); 
  });
 });

});
</script>

<input id="myid" type="text" value="하보니">

이벤트 제거

이벤트를 제거하려면 off(), unbind(), undelegate(), die() 를 사용할 수 있으며 one() 메소드는 등록한 이벤트가 1회 발생하면 자동으로 제거되기 때문에 일회성 이벤트에 적합합니다.

.off() 이벤트 해제

// 선택한 요소의 이벤트 제거
$(select).off(event);

// 선택한 요소의 하위 요소 이벤트 제거
$(select).off(event, child select);

// 함수와 함께 정의한 경우
$(select).off(event, child select, function);

<script>
$(function(){

 $("input#myid").on( "click", function(){
  $(this).css("background", "red");

  $(this).on("mouseout", function(){
    $(this).css("background", ""); 
  });

  // 마우스가 벗어나면 이벤트를 제거
  $(this).off("click");
 });

});
</script>

<input id="myid" type="text" value="하보니">

.unbind() 이벤트 해제

.live() 이벤트는 .die() 로 이벤트를 제거합니다. 동적으로 생성된 요소에도 등록된다는 점을 제외하면 기능적으로는 .bind() 와 동일합니다. .bind() 로 연결된 이벤트는 .unbind() 로 해제합니다.

// 선택한 요소의 모든 이벤트 제거
$(select).unbind();

// 해당하는 이벤트만 제거하고자 할 때
$(select).unbind(event);

// 이전에 바인드된 하나의 핸들러를 해제하려면
// 두 번째 인수로 함수를 전달하세요.
$(select).unbind(event, handler);

var foo = function() {
  // 이벤트를 처리하는 코드
};
 
$( "p" ).bind( "click", foo ); 
// 단락을 클릭하면 foo가 호출됩니다.
 
$( "p" ).unbind( "click", foo ); 
// foo는 더 이상 호출되지 않습니다.

.undelegate() 이벤트 해제

.delegate() 로 연결된 이벤트는 .undelegate() 로 해제합니다.

// 선택한 요소의 모든 이벤트 제거
$(select).undelegate();

// 해당하는 이벤트만 제거하고자 할 때
$(select).undelegate(child select, event);

// 해당 요소의 다수 이벤트를 제거할 때
$(select).undelegate(child select, "event1 event2 ...");

// 이전에 바인드된 하나의 핸들러를 해제하려면
// 세 번째 인수로 함수를 전달하세요.
$(select).undelegate(child select, event, handler);

var foo = function() {
  // 이벤트를 처리하는 코드
};
 
$( "p" ).delegate( 'a', "click", foo ); 
// 단락을 클릭하면 foo가 호출됩니다.
 
$( "p" ).undelegate( 'a', "click", foo ); 
// foo는 더 이상 호출되지 않습니다.

.one() 이벤트 해제

.one() 이벤트는 한번 이벤트가 1회 발생하면 자동으로 제거되기 때문에 따로 해제할 필요가 없습니다.

<script>
$(function(){

 $("input#myid").one( "click", function(){
  $(this).css("background", "red");

  $(this).one("mouseover", function(){
    $(this).css("background", "");
  });
 });

});
</script>

<input id="myid" type="text" value="하보니">