오랜만에 글을 올립니다. 오늘은 jquery 이벤트 관련 메서드 중 동적으로 이벤트를 맵핑 할 수 있는 메서드를 정리해보겠습니다.
자바스크립트 등과 같은 웹용 개발언어에서 조금은 불편한 것이 동적인 부분의 처리가 어렵다는 것이었습니다. 그러니 jquery의 live 메서드와 die 메서드는 그런 부족한 부분을 채워주는 메서드 입니다.
.live
.live()의 메서드는 jqeury 플러그인으로 개발되어 사용이 되어오다가 jquery 버전 1.3 부터 정식 메서드로 추가되었습니다. 메서드 단어의 뜻으로는 정확히 어떤 기능을 하는 메서드인지 감이 잡히지 않습니다. 간단하게 설명하자면 개체(요소)에 이벤트라는 생명을 불어 넣어준다고 생각하시면 됩니다.
이해가 잘 안되시죠?(저도 잘 안됩니다. 메서드 이름의 단어 뜻만 가지고 설명하려고 하다보니 이해가 잘 안됩니다.)
좀더 쉽게 설명을 해보면 .click(), .bind() 등의 메서드는 HTML문서에 로드가 완료된 개체들에게만 이벤트를 맴핑을 했다면, .live() 메서드는 동적으로 생성되거나 앞으로 생성될 개체들에게도 이벤트를 맴핑 시켜 줄 수 있습니다.
예를 들어 $("a").click(function () { alert('a clicked');});의 경우 이미 로드가 완료된 HTML 문서 내에 존재하는 "a" 개체를 찾어 마우스 클릭 이벤트를 맴핑 합니다. 이후 에 동적으로 추가되는 "a"의 개체에는 이벤트를 맴핑 할 수 없습니다. 하지만 $("a").live('click',function() { alert('live click a'); }); 처럼 사용한다면 처음 로드된 개체 및 로드 후에 동적으로 생성되는 모든 "a" 개체에도 동일한 이벤트가 적용됩니다.
사용형태는 .bind() 메서드와 사용형태가 전체적으로 비슷합니다. .bind()와 동일하게 여러 이벤트를 한번에 등록하는 것도 가능합니다.
<!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>
Click me를 누를때 마다 <p>요소가 추가 되는 내용입니다. 추가된 <p> 요소에도 이벤트가 맴핑되어 역시 같은 기능을 수행합니다.
.die()
앞서 설명한 .live()와는 반대의 개념을 가진 메서드로서 동적으로 맴핑된 이벤트를 해제하는 기능을 하는 메서드입니다.
동적으로 맴핑된 이벤트를 해제하는 이유는 클라이언트에서 HTML문서의 변화를 계속 감지하기 때문에 클라이언트의 부하를 줄여주기 위한 것도 있으며, 어느 순간 해당 기능이 없어지는 경우 불필요한 부하를 막거나 계속되는 이벤트 맴핑으로 인한 오류를 미연에 방지하기 위함입니다.
<!DOCTYPE html>
<html>
<head>
<style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
<script>
function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function () {
$("#theone").live("click", aClick)
.text("Can Click!");
});
$("#unbind").click(function () {
$("#theone").die("click", aClick)
.text("Does nothing...");
});
</script>
</body>
</html>
bind click을 누르게 되면 이벤트를 동적으로 맴핑을 시켜줍니다. 그 이후 부터는 클릭을 하게되면 click 이벤트가 동작을 하게 됩니다.
반대로 unbind를 클릭하게 되면 동적으로 맴핑되었던 이벤트를 해제시켜 줍니다. 간단하게 동적으로 이벤트를 맴핑하거나 맴핑 해제를 시킬 수 있다는 것이 너무 환상적입니다.
.one()
.bind()와 동일한 방식으로 이벤트를 추가합니다. .bind()메서드로 맴핑된 이벤트는 HTML 문서가 오픈 되어 있는 동안에 계속 사용할 수 있습니다. 하지만 .one() 메서드로 맴핑된 이벤트는 딱 한번만 실행이 되고는 사라집니다.
딱 한번만 실행이 됩니다. 실행되는 걸 확인해 보고 싶으시다면 http://api.jquery.com/one/ 을 방문하여 확인해보시기 바랍니다.
'IT > jquery' 카테고리의 다른 글
| jQuery를 이용한 HTML DOM 접근 방법 - 기본 셀렉터 (2) | 2016.01.25 |
|---|---|
| jquery 이벤트 메서드 중요메서드 정리 (0) | 2012.12.26 |
| jquery 이벤트 지원 메서드 정리 (0) | 2012.12.21 |
| jQuery Form 관련 메서드 정리 (0) | 2012.12.17 |
| jQuery element(요소)의 속성 관련 메서드 정리 (0) | 2012.12.13 |
