jQuery API - live(), 이벤트 바인딩하기

live

.live( events, handler )Returns : jQuery

개요 : 현재 및 미래의, 현재의 선택과 일치하는 모든 요소에 대하여 이벤트 처리기를 연결합니다.

.live( events, handler )
events "click", "keydown." 과 같은 Javascript 이벤트 타입을 표현하는 문자열. jQuery 1.4 부터 공백문자로 구분된 여러개의 이벤트 타입이나 사용자 이벤트 명을 사용할 수 있게 되었습니다.
handler 이벤트가 발생할 때 동시에 실행될 기능.
.live( events, data, handler )
events "click", "keydown." 과 같은 Javascript 이벤트 타입을 표현하는 문자열. jQuery 1.4 부터 공백문자로 구분된 여러개의 이벤트 타입이나 사용자 이벤트 명을 사용할 수 있게 되었습니다.
data 이벤트 핸들러에 전달할 데이터 집합.
handler 이벤트가 발생할 때 동시에 실행될 기능능.
.live( events-map )
events-map 하나 이상의 JavaScript 이벤트 타입과 집합과 그들이 실행할 함수들.

jQuery 1.7에 와서, .live() 함수는 사용이 중지 되었습니다. 이벤트를 연결하는 것은 .on() 함수로 대체 되었습니다. 하위 버젼의 jQuery에서는 .live() 함수보다는 .delegate() 함수를 사용하기를 권고합니다.

이 함수는 페이지의 document 요소에 이벤트 핸들러 연결을 할 수 있습니다. 페이지에 동적 컨텐츠를 추가하는 쉬운 방법입니다. 더 많은 정보를 얻기를 원하시면 .on() 함수를 참고하시기 바랍니다.

버젼별로 .live() 함수 기능과 같은 기능을 하는 방법은 아래 처럼 쓰여질 수 있습니다. 이 세가지 이벤트 바인드 함수는 모두 같은 효과를 냅니다.

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

위 events 인자는 공백 문자로 연결된 이벤트 타입명과 선택적인 네임스페이스로 구성할 수 있습니다. 또한, 이벤트명인 문자열들과 핸들러의 집합인 event-map 이 인자가 될 수도 있습니다. 예를 들어, 아래의 세 함수는 기능적으로 동일한 내용을 보여줍니다. (하지만 더 효과적이고 성능이 좋은 방법은 delegated 이벤트 핸들러를 사용하는 것입니다.):

$("a.offsite").live("click", function(){ alert("Goodbye!"); });                // jQuery 1.3+
$(document).delegate("a.offsite", "click", function(){ alert("Goodbye!"); });  // jQuery 1.4.3+
$(document).on("click", "a.offsite", function(){ alert("Goodbye!"); });        // jQuery 1.7+

그러나 .live() 함수는 이제 더 이상 유용한 함수가 아닙니다. 최근 버젼의 jQuery는 그것의 단점을 극복한 더 나은 함수들을 제공하기 때문입니다. 아래는 .live() 함수가 발생시키는 문제점들입니다.

- jQuery가 .live() 함수를 호출하기 전, 선택된 요소들을 탐색을 시도할 때, 큰 문서는 시간 소요가 상당합니다.

- 함수를 연결해서 사용하는 것이 불가능합니다. 예를 들어, $("a").find(".offsite, .external").live( ... ); 와 같은 형태의 함수 사용은 정확한 결과를 예측하기 힘듭니다.

- document 에 연결된 모든 .live() 로 이벤트들을 연결하려 할 때, 그들을 다루기 전에 아주 오랜 시간이 소요됩니다.

- 모바일 OS인 iOS (iPhone, iPad, iPod Touch) 에서 click 이벤트는 스타일이 cursor: pointer로 적용되어 있지 않은 요소에 .live() 함수로 바인딩 하면 상위 요소로 이벤트가 전달이 되지 않습니다. 이런 점 때문에 copy/paste가 되지 않는 단점이 있으므로 유의해야 합니다.

- 이벤트 핸들러에서 event.stopPropagation()을 호출하면 원하는 시점에 이벤트 핸들러의 작동을 멈출 수 없기도 합니다. document에 서 이벤트가 이미 처리되는 경우가 있기 때문입니다.

- 이 .live() 함수는 다을 이벤트 함수들과 같이 사용할 때 예기치 않은 작동을 하기도 합니다. 예를 들어, $(document).unbind("click") 를 실행시키면 .live() 함수로 바인딩 했던 모든 click 이벤트를 제거해 버리는 것처럼 말입니다.

그럼에도 불구하고 여전히 .live() 함수를 사용해야 한다면, 아래와 같은 권고를 드립니다. 버젼에 따라 도움이 될 수 있습니다.

- jQuery 1.7 이전 버젼들에서는, .live()를 사용해서 바인딩을 한 후에는 실행을 멈추게 하기 위해서, 핸들러에서 반드시 false를 반환해야 합니다. .stopPropagation() 는 올바르게 작동하지 않습니다.

- jQuery 1.4 버젼에서 .live() 함수는 모든 JavaScript 이벤트들의 버블링 뿐만 아니라 사용자 이벤트도 지원합니다.

- jQuery 1.3.x 버젼 대에서는 단지 다음과 같은 JavaScript 이벤트만 지원합니다: click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, mouseup.

예 제
클릭하면 문단을 추가합니다. Note .live() 모든 문단 태그에 바인딩 됩니다. 심지어 새로 추가된 것들도요.

<!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 me!</p>

  <span></span>
<script>
$("p").live("click", function(){
  $(this).after("<p>Another paragraph!</p>");
});
</script>

</body>
</html>

미리보기

동적으로 추가된 요소들에도 자동적으로 클릭 이벤트가 바인딩 되네요.

예 제
기본 액션을 취소하고 false를 반환하여 버블링을 방지합니다.

$("a").live("click", function() { return false; })

예 제
preventDefault 함수를 이용하여 기본 액션을 취소합니다.

$("a").live("click", function(event){
  event.preventDefault();
});

예 제
.live() 함수로 사용자 이벤트를 바인딩합니다.

<!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").live("myCustomEvent", function(e, myName, myValue) {
  $(this).text("Hi there!");
  $("span").stop().css("opacity", 1)
           .text("myName = " + myName)
           .fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
  $("p").trigger("myCustomEvent");
});
</script>

</body>
</html>

미리보기

live() 함수의 인자로 사용자 함수를 사용하여 기능을 구현했네요.

예 제
다수의 live 이벤트 핸들러 집합을 사용합니다. Note .live() click, mouseover, mouseout 이벤트를 바인딩 합니다. 새로 생성된 것에도 적용됩니다.

<!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 me!</p>
  <span></span>
  
<script>
$("p").live({
  click: function() {
    $(this).after("<p>Another paragraph!</p>");
  },
  mouseover: function() {
    $(this).addClass("over");
  },
  mouseout: function() {
    $(this).removeClass("over");
  }
});
</script>

</body>
</html>

미리보기

제일 위의 예제와 동일한 결과이지만 구현 방법은 다르네요. 한방에 모든 걸 처리해도 되면 위쪽 구현을 각 단계별 별도 처리가 필요하면 현재의 예제를 적용해 보는 것도 좋은 방법이겠습니다.

이 함수 그만 쓰라니까 그만 써야겠네요. 이미 쓰신 분들이야 뭐~~. ㅎㅎ

그럼 즐프하세요.

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

저작자표시 비영리 변경금지

'프로그래밍 > jQuery' 카테고리의 다른 글

jQuery API - mouseleave(), 마우스가 요소에서 벗어날 때 (0)	2012.01.13
jQuery API - mouseenter(), 마우스 진입 감지 이벤트 (2)	2012.01.04
jQuery API, mousedown, 마우스 누름 이벤트 (0)	2012.01.04
jQuery API - load(), 로드되면 발생하는 이벤트 (0)	2012.01.04
jQuery API 정복 - keyup(), 키를 눌렀다 뗄때 (0)	2011.12.26
jQuery API 정복 - keypress(), 브라우져의 키 누름 이벤트 (0)	2011.12.26
jQuery API 정복 - keydown(), 키보드 누름 이벤트 (2)	2011.12.26
jQuery API 정복 - hover(), 마우스 오버 이벤트 (0)	2011.12.26

즐거움을 찾자 Find Fun!!

jQuery API - live(), 이벤트 바인딩하기

'프로그래밍 > jQuery' 카테고리의 다른 글

티스토리툴바

jQuery API - live(), 이벤트 바인딩하기

'프로그래밍 > jQuery' 카테고리의 다른 글

관련글

티스토리툴바