one
원문 링크 
http://api.jquery.com/one/
개요 : 요소에 이벤트 처리기를 연결합니다. 핸들러는 대부분 한번씩 실행됩니다.
- .one( events [, data], handler(eventObject) )
- 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 이벤트 핸들러에 전달할 데이터 맵
이 함수의 첫번째 형태는 이벤트가 호출된 후 핸들러에서 이벤트가 해제되는 부분을 제외하면 .bind() 함수와 같습니다. 두번째 형태는 jQuery 1.7에 와서야 소개됩니다. .on() 함수와 동일한데, 호출된 후 핸들러에서 이벤트가 제거되는 부분이 다릅니다. 예를들어
$("#foo").one("click", function() {
alert("This will be displayed only once.");
});
이 코드가 실행되면, foo 인 요소를 클릭하면 알림창이 나타납니다. 그 다음 클릭에는 아무런 일도 일어나지 않습니다. 아래 코드와 동일한 작동을 하게 되는 것입니다.
$("#foo").bind("click", function( event ) {
alert("This will be displayed only once.");
$(this).unbind( event );
});
즉, 바인딩 했다가 정확하게 .unbind() 함수를 실행시키는 것과 동일한 효과를 나타냅니다.
만일 첫번째 인자에 공백으로 구분된 여러개의 이벤트 타입을 사용했다면, 이벤트 핸들러는 동시에 여러 이벤트를 호출하게 됩니다.
예 제
각 div에 동시에 click을 묶어줍니다.
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>Click a green square...</p>
<script>
var n = 0;
$("div").one("click", function() {
var index = $("div").index(this);
$(this).css({
borderStyle:"inset",
cursor:"auto"
});
$("p").text("Div at index #" + index + " clicked." +
" That's " + ++n + " total clicks.");
});
</script>
</body>
</html>미리보기
이벤트를 한번만 사용하고 자동으로 해제하고 싶을 때 이 함수를 사용하면 아주 유용할 것 같습니다. 좋으네요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| select(), 텍스트 드래그 이벤트 (2) | 2012.03.09 |
|---|---|
| scroll(), 스크롤 이벤트 (3) | 2012.03.06 |
| resize(), 사이즈 바꾸기 (0) | 2012.03.06 |
| ready(), 문서가 준비되면 실행하기 (0) | 2012.03.06 |
| on(), 이벤트 바인딩 하기 (0) | 2012.02.24 |
| off(), 이벤트 해제하기 (0) | 2012.02.24 |
| jQuery API - mouseup(), 마우스를 눌렀다 뗄 때 (0) | 2012.01.13 |
| jQuery API - mouseover(), 마우스가 올라올 때 (3) | 2012.01.13 |