one 메서드
one 메서드는 요소에 이벤트
핸들러를 추가할 수 있게 해줍니다. 이벤트가
한 번 실행된 후에는 핸들러가
자동으로 제거됩니다.
구문
다음과 같이 요소에 이벤트 핸들러를 부착합니다.
첫 번째 매개변수는 문자열 형태로 하나 또는 공백으로 구분된 여러 개의 이벤트를 전달하고,
두 번째는 JavaScript 객체 형태의 데이터를 전달하며,
이 데이터는 이벤트 발생 시 핸들러의
event.data 속성으로 전달됩니다. 두 번째 매개변수는
선택 사항입니다. 세 번째로는 이벤트 객체를 받는 핸들러 함수를 전달하거나,
false를 전달합니다:
$(selector).one(events, [data], handler(eventObject));
두 번째 매개변수로 요소 내부의 하위 요소를 필터링하는 추가 선택자를 전달하고,
세 번째로는 이벤트 발생 시 핸들러의 event.data 속성으로 전달되는
추가 데이터를 전달할 수 있습니다. 두 번째와 세 번째 매개변수는
선택 사항입니다. 네 번째로는 이벤트 객체와
선택적 추가 매개변수를 받는 핸들러 함수를 전달합니다.
핸들러 함수 대신 false를 전달하면 함수는 단순히
false를 반환합니다:
$(selector).one(events, [selector], [data], handler(eventObject));
one 메서드를 다른 방식으로 사용할 수도 있습니다.
이 경우 첫 번째 매개변수로 JavaScript 객체를 전달하며,
객체의 키는 이벤트 타입, 값은 요소에 추가할
핸들러 함수입니다:
$(selector).one({'event type': handler}, [selector], [data]);
추가 선택자를 전달하지 않으면, 이벤트는 핸들러를 부착한 요소에서 발생합니다. 그렇지 않은 경우, 해당 선택자와 일치하는 하위 요소에서 이벤트가 발생합니다 (위임된 이벤트).
예제
단락을 클릭했을 때 one 메서드에 전달한 데이터를
출력해 봅시다. 이후 클릭에서는
아무 일도 일어나지 않습니다. 우리가 만든
핸들러 함수 testFunc를 사용하겠습니다:
<p>click</p>
function testFunc(event) {
alert(event.data.text);
}
$('p').one('click', {text: 'aaa' }, testFunc);
