jQuery Event - .one() & .live() & .die()
| .one() | .bind()와 동일하지만 이벤트가 한 번 실행된 후 .unbind()가 된다. |
| .live() | 앞으로 생성될 요소에도 이벤트 핸들러를 지정 이벤트 델리게이션(Event Delegation)을 사용하여 새로 생성되는 요소에도 이벤트가 적용된다는 점에서 .bind()와 다르다. |
| .die() | .live()로 생성된 이벤트 핸들러를 삭제한다. |
[ .one( events [, data], handler(eventObject)) ]
.bind() 메소드와 동일한 방식으로 이벤트를 추가한다. 하지만 .one() 메소드를 통해 추가된 이벤트는 딱 한번만 실행이 되고 사라지게 된다.
events "click", "submit" 또는 사용자 이벤트명 같은 하나 이상의 JavaScript 이벤트 타입명
data 이벤트 핸들러에 전달할 데이터 맵
handler(eventObject) 이벤트가 발생될 때 동시에 실행될 함수
.one( events [, selector] [, data], handler(eventObject) )
events 공백으로 구분된 하나 이상의 이벤트 타입과 옵션인 네임스페이스, "click" 또는 "keydown.myPlugin"
selector 이벤트가 발생할 선택된 요소의 자식요소를 추출할 선택자 문자열.
만약 선택자가 null 이거나 생략되면, 이벤트는 선택된 요소에 도달해야 발생된다.
data 이벤트 핸들러에 전달할 데이터 맵
handler(eventObject) 이벤트가 발생될 때 동시에 실행될 함수
false 를 값으로 사용하여 false를 반환하는 함수를 대신할 수 있다.
.one( events-map [, selector] [, data] )
events-map 키와 이벤트 타입으로 이루어진 맵
selector 이벤트가 발생할 선택된 요소의 자식요소를 추출할 선택자 문자열
만약 선택자가 null 이거나 생략되면, 이벤트는 선택된 요소에 도달해야 발생된다.
data 이벤트 핸들러에 전달할 데이터 맵
간단하게 .one() 이벤트에 대하여 예를 들면 아래와 같다.
alert("This will be displayed only once.");
});
위의 소스는 아래와 같이 .bind() 된 후 실행하고자 하는 코드를 실행 한 이후 .unbind() 해주는 것과 같다.
alert("This will be displayed only once.");
$(this).unbind( event );
});
[ .one() 이벤트 사용 예제 ]
<head>
<title>jQuery</title>
<style>
div { width:60px; height:60px; margin:5px; float:left; background:green; border:10px outset; cursor:pointer; }
p { color:red; margin:0; clear:left; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var n = 0;
$("div").one("click", function() {
var index = $("div").index(this);
$(this).css({
borderStyle:"inset", cursor:"auto", background:"blue";
});
$("p").text("Div at index #" + index + " clicked." + " That's " + ++n + " total clicks.");
});
});
</script>
</head>
<body style="padding:10px;">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>Click a green square...</p>
</body>
</html>
다섯개의 div가 있는데, 네모 박스를 클릭하여 보면 배경색이 Green에서 Blue로 변하고, 다신 그 박스를 선택 할 수 없다.
[ .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 요소에 이벤트 핸들러 연결을 할 수 있도록 되어 있다.
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
버전 별로 구분지었지만 모두 같은 기능을 한다.
[ .live이벤트의 문제점 ]
.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() 함수를 사용해야 한다면, 아래와 같은 권고를 드린다.
.live()를 사용해서 바인딩을 한 후에는 실행을 멈추게 하기 위해서, 핸들러에서 반드시 false를 반환해야한다. .stopPropagation() 는 올바르게 작동하지 않는다.
- jQuery 1.4 버전에서 .live() 함수는 모든 JavaScript 이벤트들의 버블링 뿐만 아니라 사용자 이벤트도 지원한다.
- jQuery 1.3.x 버전 대에서는 단지 다음과 같은 JavaScript 이벤트만 지원한다
click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, mouseup
[ .live() 이벤트 사용 예제 ]
<head>
<title>jQuery Selector</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<style>
div,pre { background : #FFF; padding:10px; margin:10px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnAdd').click(function () {
$('ul').append('<li>list item Add(' + $('li').length + ')</li>');
});
$('li').live('click', function () {
alert($(this).text());
});
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 0</li>
</ul>
<input type="button" id="btnAdd" value="Add Element" />
</div>
</body>
</html>
.click() 이벤트를 통하여 버튼을 클릭 할 때마다 "ul"태그 하단의 "li"태그가 새로 생성 됨을 확인 할 수 있다. 하지만 .click() 이벤트는 새로 생성만 할 뿐 새로 생성된 "li"태그의 내용에 대해서는 별다른 이벤트를 주지 못한다.
이에 .live() 이벤트를 사용하여 .click()이벤트를 통해 생성된 요소들에 대하여 경고창이 발생하도록 하였음을 알 수 있다.
[ .die(eventType [, handler]) ]
.live() 함수로 바인딩 된 모든 이벤트들을 제거
eventType click 또는 keydown과 같은 Javascript 이벤트를 포함하는 문자열.
handler 더 이상 수행하지 않게 할 기능
.die( eventTypes )
eventTypes 하나 이상의 이벤트 집합과 더 이상 실행하지 않을 그 이벤트들에 대한 기능들
.live() 함수로 바인딩 된 핸들러는 .die() 함수를 사용하여 해제할 수 있다. 이 함수는 .bind() 함수로 바인딩 된 모든 이벤트를 제거하는 함수인 .unbind() 를 인자없이 호출하는 것과 유사하다.
[ .die() 이벤트 사용 예제 ]
$(document).ready(function () {
$('#btnAdd').click(function () {
$('ul').append('<li>list item Add(' + $('li').length + ')</li>');
});
$('li').live('click', function () {
alert($(this).text());
});
$('#btnDie').click(eventDie);
});
function eventDie() {
$('li').die();
//or $('li').die('click');
}
</script>
// html 소스 부분에 추가
<input type="button" id="btnDie" value="Event Die" />
.live() 이벤트와 동작은 동일하나 "Event Die" 버튼을 클릭하게 되면 이전 ,live()이벤트 때 클릭 시 경고창 뜨는 것을 볼 수 없다.
원본 : http://www.sqler.com/394534, http://findfun.tistory.com/entry/jQuery-API-정복-die-이벤트-해제하기
'Programming > JQuery' 카테고리의 다른 글
| jQuery - 스타일 관련 메소드 (0) | 2012.04.26 |
|---|---|
| jQuery Event - Browser Events (0) | 2012.04.26 |
| jQuery Event - .bind() & .unbind() (0) | 2012.04.24 |
| jQuery Event - Document loading (0) | 2012.04.24 |
| jQuery Event - Form Events (0) | 2012.04.24 |
