jQuery의 일회성 이벤트

off 메소드를 사용하여 이벤트를 제거하는 방법을 공부할 때, 우리는 다음과 같은 구조를 사용했습니다:

$('li').on('click', function() {
	$(this).append('!');
	$(this).off('click', func);
});

먼저, on을 사용하여 핸들러 함수를 연결한 다음, off을 사용하여 연결을 해제했습니다.

jQuery에는 편리한 메소드 one가 있으며, 이를 통해 일회성 이벤트를 바인딩할 수 있습니다. 이 이벤트는 오직 한 번만 실행된 후 자동으로 연결 해제됩니다. 이 메소드는 첫 번째 매개변수로 이벤트 유형을, 두 번째 매개변수로 연결할 함수를 받습니다.

다음 예제는 아래의 HTML 코드를 기반으로 살펴보겠습니다:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

CSS 코드는 다음과 같습니다:

li {
	width: 100px;
	cursor: pointer;
}

이제 각 li에 일회성 이벤트를 바인딩합니다:

$('li').one('click', function() {
	$(this).append('!');
});

목록 항목을 클릭해 보세요. 보시다시피, one 메소드 덕분에 동일한 효과를 얻었습니다.

모든 링크에 대해 이벤트를 바인딩하세요. 링크 위로 마우스를 가져가면 그 텍스트 끝에 해당 링크의 href가 괄호 안에 추가됩니다. 링크에 첫 번째로 마우스를 가져간 후에는, href를 텍스트 끝에 추가하는 이벤트를 해제해야 합니다.

모든 입력창에 대해, 아무 입력창이나 클릭할 때 자신의 value를 출력하도록 만드세요, 하지만 오직 첫 번째 클릭 시에만. 입력창을 다시 클릭해도 반응이 없어야 합니다.

숫자가 있는 단락이 주어집니다. 단락을 클릭하면 그 안에 들어 있는 숫자의 제곱이 나타나야 합니다, 하지만 오직 첫 번째 클릭 시에만. 단락을 더블 클릭하면 그 안의 숫자가 두 배가 되어야 합니다, 하지만 역시 오직 첫 번째에만.

단락이 주어집니다. 첫 번째 클릭 시에만 단락 끝에 '!'가 추가되도록 만드세요.