jQuery의 .live() 및 .die() 사용 소개

많은 개발자들이 jQuery의 .live() 메소드를 알고 있습니다. 대부분은 이 함수가 무엇인지 알고 있지만 구현 방법을 모르기 때문에 사용하기가 그리 편하지 않습니다. 그리고 그들은 .live()event 바인딩을 해제하는 .die() 메서드에 대해 들어본 적이 없습니다. 이것에 익숙하더라도 .die()를 알고 계시나요?

.live()란 무엇입니까?
.live 메서드는 이벤트를 DOM 요소에 바인딩할 수 있다는 점을 제외하면 .bind()와 유사합니다. 다음 예를 살펴보십시오.

사용자가 링크를 클릭하면 해당 사용자가 사이트를 떠난다는 알림을 받고 싶다고 가정해 보겠습니다.

코드는 다음과 같습니다.

$(
document
).ready( function() { 
$('a').click( function() { 
alert("You are now leaving this site"); 
return true; 
}); 
});

.click()은 보다 일반적인 .bind()를 구현하는 간단한 방법일 뿐입니다. 아래와 위의 코드는 위의 구현과 동일합니다.

코드는 다음과 같습니다.

$(document).ready( function() { 
$('a').bind( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
});

하지만 이제 javascript를 통해 페이지에 대한 링크를 추가하세요.

코드는 다음과 같습니다.

$('body').append('e388a4556c0f65e1904146cc1a846beed632822ac9277025ec149ceea8685596확인해보세요!5db79b134e9f6b82c0b36e0489ee08edb95755ad3787079bf71fa9f1aad3fdcf 노드에 클릭 이벤트를 바인딩할 때 링크가 존재하지 않기 때문에 메소드가 호출되지 않습니다. .bind() 대신 ( ):

코드는 다음과 같습니다.

$(document).ready( function() { 
$('a').live( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
});

이제 페이지에 새 링크를 추가하면 바인딩도 작동합니다.

.live() 작동 방식
.live()의 마법은 이벤트를 선택한 요소에 바인딩하지 않고 실제로 DOM 트리의 루트 노드에 바인딩한다는 것입니다(예: $(document )), 매개변수와 같은 요소로 전달됩니다.

따라서 요소를 클릭하면 클릭 이벤트가 루트 노드에 도달할 때까지 DOM 트리를 통해 전달됩니다. 이 .click() 이벤트에 대한 trigger는 루트 노드의 .live()에 의해 생성되었습니다. 이 트리거 메서드는 먼저 클릭한 대상이 .live()에서 호출한 선택기와 일치하는지 확인합니다. 따라서 위의 예에서는 클릭한 요소가 $('a').live()의 $('a')와 일치하는지 확인하고 일치하면 바인딩 메서드가 실행됩니다.

루트 노드 내에서 무엇을 클릭하더라도 루트 노드의 .click() 이벤트가 발생하기 때문에 이 확인은 루트 노드에 추가된 요소를 클릭할 때 발생합니다.

모든 .live()는 .die()가 될 수 있습니다.
.bind()를 알고 있다면 .unbind()도 확실히 알고 있는 것입니다. 그러면 .die()와 .live()는 비슷한 관계를 갖습니다. 위 바인딩에 액세스하기 위해(사용자가 링크를 클릭할 때 대화 상자가 팝업되는 것을 원하지 않음) 다음을 수행합니다.

코드는 다음과 같습니다.

$('a').die() ;

더 구체적으로 설명하세요. 호버나 기타 이벤트와 같이 다른 이벤트가 바인딩되어 유지되어야 하는 경우 클릭 이벤트 바인딩을 해제하기만 하면 됩니다.

코드는 다음과 같습니다.

$('a').die('click');

좀 더 구체적으로 메소드 이름이 정의되어 있으면 지정된 메소드를 바인딩 해제할 수 있습니다.

코드는 다음과 같습니다.

specialAlert = function() { 
alert("You are now leaving this site"); 
return true; 
} 
$(document).ready( function() { 
$('a').live( 'click', specialAlert ); 
$('a').live( 'click', someOtherFunction ); 
}); 
// then somewhere else, we could unbind only the first binding 
$('a').die( 'click', specialAlert );

.die()에 대한 질문
이러한 함수를 사용할 때 .die() 메서드에는 단점이 있습니다. .live() 메소드에 사용되는 element selector만 사용할 수 있습니다. 예를 들어 다음과 같이 작성할 수 없습니다.

코드는 다음과 같습니다.

$(document).ready( function() { 
$('a').live( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
}); 
// it would be nice if we could then choose specific elements 
// to unbind, but this will do nothing 
$('a.no-alert').die();

.die() 이벤트가 일치하는 것 같습니다. 대상 선택 또한 .live() 바인딩을 해제하지만 실제로 $('a.no-alert')에는 바인딩이 없으므로 jquery는 이를 제거할 바인딩을 찾을 수 없으며 작동하지 않습니다.
더 나쁜 것은 다음과 같습니다.

코드는 다음과 같습니다.

$(document).ready( function() { 
$('a,form').live( 'click', function() { 
alert("You are going to a different page"); 
return true; 
}); 
}); 
// NEITHER of these will work 
$('a').die(); 
$('form').die(); 
// ONLY this will work 
$('a,form').die();

How to fix .die()

다음 글에서는 .die()를 실행하는 새로운 방법을 제안하겠습니다. , 이전 버전과 호환되는 톤 동작을 제공할 수 있습니다. 시간이 있으면 jQuery 핵심 개발 팀이 내 제안을 받아들이고 다음 릴리스에서 수정하도록 제안할 것입니다. 선택적 컨텍스트 매개변수를 포함하여 방금 작성한 메서드를 더 많이 사용하여 사용자 정의 노드를 연결할 수 있기를 바랍니다. 이벤트이며 루트 노드가 아닙니다.

더 많은 정보와 예시를 원하시면 jQuery .live() 및 .die() 문서를 확인하세요.

또한 .delegate() 및 .undelegate()에 주의하세요. 이들은 .live()를 대체할 수 있습니다. 및 .die()는 밀접하게 관련되어 있습니다.

위 내용은 jQuery의 .live() 및 .die() 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!