jQuery API 정복 - 이벤트 연결하기, bind()

.bind()

원문 링크 http://api.jquery.com/bind/

.bind( eventType [, eventData] , handler(eventObject) )Returns : jQuery

개요 : 요소(element)에 이벤트 처리기(handler)를 연결합니다.(바인딩이라고 하죠)

• .bind( eventType [, eventData], handler(eventObject) )
• eventType 하나 이상의 DOM 이벤트를 표현하는 문자열. "click", "submit," 또는 사용자가 만든 함수들(사용자정의함수).
• eventData 이벤트 핸들러에 전달하기 위한 데이터 집합(map of data).
• handler(eventObject) 이벤트와 함께 실행될 함수
• .bind( eventType [, eventData], preventBubble )
• eventType 하나 이상의 DOM 이벤트를 표현하는 문자열. "click", "submit," 또는 사용자가 만든 함수들(사용자정의함수).
• eventData 이벤트 핸들러에 전달하기 위한 데이터 집합(map of data).
• preventBubble false를 세번째 인자로 설정하면 발생하는 기본 액션을 방지하고 버블링(bubbling, 의역이 뭔지??)에서 이벤트를 중지시키는 기능이 구현됩니다.
• .bind( events )
• events 실행될 하나 이상의 DOM 이벤트과 함수 집합

jQuery 1.7에서, .on() 문서에 이벤트 핸들러를 연결시키기 위한 함수로 나오게 되었습니다. 이전 버젼에서는, .bind() 함수가 요소와 직접적으로 이벤트 핸들러를 연결하는데 사용되었습니다. 처리기(Handlers)는 jQuery 객체로 현재 선택된 요소들을 연결해었습니다. 그 요소들은 반드시 존재해야 .bind()함수가 발생했었습니다. 좀 더 유연하게 이벤트를 바인딩하려면 .on() 또는 .delegate() 함수들을 참고하시기 바랍니다.

jQuery 글을 작성하는 동안 두번의 버젼업이 있었네요.1.5때부터 시작했는데 벌써 1.7버젼이네요. 그에 따라 본문글도 업데이트가 되고 있네요. 참고하시기 바랍니다.

eventType에 올 수 있는 문자열은 왠만한 것은 다 됩니다. DOM에 존재하는 기본 이벤트 뿐만 아니라 사용자가 정의한 함수명은 무엇이든 사용할 수 있습니다. 이런 사용자 정의 이벤트들은 브라우져에서 호출되는 것이 아니지만 다른 Javascript 코드에서 .trigger() 또는 .triggerHandler() 함수와 같은 것으로 이벤트를 발생시킬 수 있습니다.

eventType 문자열이 점(.) 연사자가 포함되어 있다면 이 이벤트는 네임스페이스 입니다. 네임스페이스에 속한 이벤트로 인식하게 됩니다. 예를 들어, .bind('click.name', handler)와 같은 코드라고 한다면, click 문자열은 이벤트 타입이 되고, name 문자열이 네임스페이스가 되는 것입니다. 네임스페이스는 다른 것에 영향을 주지않고 바인딩을 해제하거나 특정 이벤트를 발생시키게 됩니다. 좀 더 정보를 원하시면 .unbind() 함수를 참고하시기 바랍니다.

이벤트 요소에 도달하면 해당 요소에 연결된(바인딩된) 이벤트가 발생하게 됩니다. 만약 여러개의 처리기(핸들러)가 등록되 있다면, 이 이벤트들은 항상 작성된 순서대로 실행되게 됩니다. 모든 핸들러가 실행된 후에, 그 이벤트는 정상적인 이벤트 전파 경로를 따라 계속됩니다. 즉, 함수의 흐름을 따른다는 얘기네요.

.bind() 의 기본적인 사용 방법은 :

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

위 스크립트는 id='foo'인 요소에 click이벤트를 연결하게 됩니다. 유저가 이 요소를 클릭하면 알림창이 나타나게 되는 것입니다.

 

여러 이벤트 ( Multiple Events )

공백으로 구분된 여러개의 이벤트를 연결할 수 있습니다.

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

이 스크립트는 <div id="foo">에 마우스 커서가 들어오거나 벗어날 때 div 에 'entered' 클래스가 토글됩니다.

jQuery 1.4 에서는 여러개의 이벤트 핸들러를 구현하기 위해서는 아래와 같이 구현했습니다.

$('#foo').bind({
  click: function() {
    // do something on click
  },
  mouseenter: function() {
    // do something on mouseenter
  }
});

 

이벤트 처리기 ( Event Handlers )

위에서 보듯이 handler 파라미터는 콜백 함수가 필요합니다. 핸들러 안의 this 키워드는 핸들러를 연결(bind)하려는 DOM 요소(element)를 지칭합니다. jQuery에서 요소를 사용하려면, 일반적인 $() 함수를 사용하여 전달할 수 있습니다. 예로 :

$('#foo').bind('click', function() {
  alert($(this).text());
});

이 코드가 실행되면 유저가 id='foo'인 요소를 클릭하면 그 요소 내부의 텍스트를 알림창으로 나타냅니다.

As of jQuery 1.4.2 duplicate event handlers can be bound to an element instead of being discarded. This is useful when the event data feature is being used, or when other unique data resides in a closure around the event handler function.

jQuery 1.4.3에 와서 이벤트 핸들러 인자 자리에 false를 넘길 수 있습니다. 다음과 같이 바인딩 할 수 있습니다: function(){ return false; }. 이 함수는 .unbind( eventName, false )를 호출하여 나중에 제거될 수 있습니다.

후~~ 위 두 단락은 걍 해석은 하겠는데 정확히 무엇을 의미하는지를 모르겠네요. 계속 사용해보면 알겠지만 그냥 그렇구나 정도면 큰 문제가 없어 보이긴 합니다.

 

이벤트 객체 ( The Event object )

event 객체를 핸들러에서 사용하는 방법은 아래와 같습니다.

$(document).ready(function() {
  $('#foo').bind('click', function(event) {
    alert('The mouse cursor is at ('
      + event.pageX + ', ' + event.pageY + ')');
  });
});

Note 이름이 없는 함수에 인자로 전달할 수 있습니다. 이 코드는 id='foo'인 요소를 마우스로 클릭했을 때의 좌표를 알림창으로 알려주게 됩니다.

이 부분은 본문을 보시면 더 많은 내용이 있습니다. 도저히 무슨 의미인지 모르겠어서 삭제를 하였습니다. 좀더 보시고 싶은 분은 본문에서 확인하시기 바랍니다.

 

이벤트 데이터 전달 ( Passing Event Data )

선택사항인 eventData 매개변수는 일반적인 형태로 사용되지 않습니다. 매개변수를 전달했을 경우 이 인자는 핸들러에 추가적으로 정보를 전달하게 됩니다. 이 매개변수의 폐쇄 부분에서 야기될 수 있는 문제를 해결할 수 있다는 것입니다. 무슨 얘기냐 하면, 같은 외부 변수를 참조하는 두 개의 이벤트 핸들러가 있다고 가정한다면:

var message = 'Spoon!';
$('#foo').bind('click', function() {
  alert(message);
});
message = 'Not in the face!';
$('#bar').bind('click', function() {
  alert(message);
});

위 코드를 적용하고 클릭을 해보면 둘 다 Not in the face!가 알림창으로 나타납니다. 예상치 않게 변수값이 바뀌어 버립니다. 이런 상황을 피하기 위해 eventData로 메시지를 전달할 수 있습니다. 아래처럼 처리하면 원하는 결과를 얻을 수 있다는 것입니다.

var message = 'Spoon!';
$('#foo').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});
message = 'Not in the face!';
$('#bar').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});

이렇게 변수를 함수에 메시지로 전달하면 첫번째는 Spoon!이 두번째는 Not in the face!의 결과가 나타나게 됩니다.

위쪽의 예를 보면 웹의 한계성이 조금 느껴지시나요? 아~ 한계성이라고 할 수는 없고 특성이라 해야 맞겠네요. 모두 해석된 후 화면이 표출되기 때문에 message 변수는 마지막으로 설정된 값이 어싸인되게 되는 것이죠. 웹의 특성을 가만히 생각해 보시면 간단한 얘기이기도 합니다. 위쪽에 변수값이 설정되어 있다고 해서 항상 그 값이 표출될거라는 단정은 금물이겠네요.

사실 이 글은 많이 부족합니다. 많은 부분을 생략하고 본문의 내용을 과감히(?) 제거했습니다. 제가 모자라는 부분도 있고 명확히 의미가 전달되지 않고 그리 필요하지 않는 부분이라 필자 마음대로 생각하기도 했기 때문입니다. 참고하시기 바랍니다.

예 제  
문단에 click 과 double-click 을 바인딩합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
p { background:yellow; font-weight:bold; cursor:pointer; 
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Click or double click here.</p>
<span></span>
<script>
$("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )";
$("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Double-click happened in " + this.nodeName);
});
$("p").bind("mouseenter mouseleave", function(event){
$(this).toggleClass("over");
});

</script>

</body>
</html>

미리보기

 

예 제
클릭한 요소의 텍스트를 알림창으로 표현하기

$("p").bind("click", function(){
alert( $(this).text() );

예 제
사용자 함수 하나 정의하고 p에 click 이벤트를 'bar' 데이터와 함께 바인딩한 후 사용자 정의 함수 호출하기

function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

예 제
false를 반환해서 기본 액션을 취소하고 버블링을 방지하기

$("form").bind("submit", function() { return false; })

버블링?? 당췌 이게 뭐지 하면서 고민하다가 구글링을 했습니다. 마치 거품처럼 위로 올라간다는 뜻인것 같습니다. 하위요소에서 상위요소로 이벤트가 작동하는 모습 즉, 그러니까 함수가 진행되는 모습을 나타내는 것이라고 보심 되겠네요. 휴~ 이제 나도 가슴이 뻥 뚫린거 같습니다.

예 제
.preventDefault() 함수를 사용해서 기본 액션을 취소시키기.

$("form").bind("submit", function(event) {
event.preventDefault();

예 제
.stopPropagation() 함수를 사용하여 기본 액션을 방해하지 않고 버블링을 멈추기.

$("form").bind("submit", function(event) {
  event.stopPropagation();

예 제  
사용자 이벤트 바인드하기.

<!DOCTYPE html>
<html>
<head>
  <style>
p { color:red; }
span { color:blue; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
<script>

$("p").bind("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent", [ "John" ]);
});

</script>

</body>
</html>

미리보기

 

예 제
동시에 여러 이벤트를 바인딩합니다.

$("div.test").bind({
  click: function(){
    $(this).addClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});

 

bind 함수 무지 많이 사용됩니다. 꼭 알아두시기 바랍니다. 사용법은 위의 예제를 참고하시고 위에 장황하게 늘어놓은 설명은 그냥 넘겨 들으시기 바랍니다. 주는 요소와 이벤트를 연결한다는 주목적을 생각하심 될 것 같습니다.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.