jQuery의 off 메서드
on을(를) 통해 바인딩된 이벤트의 해제는
off 메서드를 사용하여 수행됩니다.
첫 번째 매개변수로 이벤트 유형(예: 'click')을 받고, 두 번째 매개변수로는 해제할 함수의 이름을 받습니다.
다음 예제를 살펴보겠습니다. 다음과 같은 HTML 코드가 있다고 가정합니다:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
CSS에는 li 태그에 대한 스타일이 지정되어 있습니다:
li {
width: 100px;
cursor: pointer;
}
li를 첫 번째 클릭한 후에 해당 요소의 이벤트가 해제되도록 만들어 보겠습니다:
$('li').on('click', function() {
$(this).append('!');
$(this).off('click', func);
});
목록 항목을 클릭해 보세요. 동일한 항목을 다시 클릭해도 아무런 반응이 일어나지 않는 것을 볼 수 있습니다. 이는 우리의 함수 func가
append 메서드를 실행한 후
off 메서드에 의해 해제되기 때문입니다.
모든 링크에 이벤트를 바인딩하세요 - 링크에 마우스를 올리면 텍스트 끝에 해당 링크의 href가 괄호 안에 추가됩니다.
링크에 처음 마우스를 올린 후에는 텍스트 끝에 href를 추가하는 이벤트를 해제해야 합니다.
모든 input에 대해, 그 중 하나를 클릭할 때마다 자신의 value를 출력하도록 만드세요. 단, 첫 번째 클릭 시에만 가능합니다.
input을 다시 클릭해도 반응이 없어야 합니다.
숫자가 있는 문단이 주어집니다. 문단을 클릭하면 해당 문단이 포함하고 있는 숫자의 제곱이 나타나야 하지만, 첫 번째 클릭 시에만 가능합니다. 문단을 더블클릭하면 문단 안의 숫자가 두 배가 되어야 하지만, 이 또한 처음 한 번만 가능합니다.
