Jquery live() vs delegate()

Jquery live() vs delegate()

이 질문에는 이미 다음과 같은 답변이 있습니다.

jQuery: live() vs delegate() (4개 답변)

닫힘9년 전에.

저는 인터넷과 다른 곳에서 사이의 차이점에 대한 게시물을 읽었습니다.live()그리고.delegate(). 하지만 제가 찾고 있는 답을 찾지 못했습니다. 만약 이것이 속임수라면 저에게 말해주세요.

우리 사이의 차이점을 알고 있습니다.live그리고.delegate저것이live체인에서 사용할 수 없습니다.저도 어디선가 읽은 적이 있습니다.delegate경우에 따라 성능이 향상됩니다.

제 질문은 당신이 어떤 상황에서live대신에delegate?

갱신하다

성능의 차이를 알아보기 위해 간단한 테스트를 해봤습니다.

새 제품도 추가했습니다..on()jQuery 1.7+에서 사용할 수 있습니다.

결과는 답변에 나와 있는 성능 문제를 거의 요약한 것입니다.

• 사용하지않습니다..live()당신의 jQuery 버전이 지원하지 않는 한..delegate().
• 사용하지않습니다..delegate()당신의 jQuery 버전이 지원하지 않는 한..on().

사이의 차이.live()그리고..delegate()그 사이보다 훨씬 더 큽니다delegate()그리고..on().

나는 절대 사용하지 않습니다.live; 사용의 이점을 고려합니다.delegate압도적일 정도로 실질적일 수 있습니다.

의 한가지 이점은live그것의 구문이 그것의 그것과 매우 가깝다는 것입니다.bind:

$('a.myClass').live('click', function() { ... });

delegate, 하지만 , 는 약간 더 장황한 구문을 사용합니다.

$('#containerElement').delegate('a.myClass', 'click', function() { ... });

하지만 이것은 제가 보기에는 실제로 일어나고 있는 일에 대해 훨씬 더 명확하게 보여주는 것 같습니다.당신은 그 사실을 깨닫지 못합니다.live이벤트가 실제로 캡처되는 예document; 와 함께delegate, 이벤트 캡처가 발생하는 것은 확실합니다.#containerElement. 당신은 같은 일을 할 수 있습니다.live, 하지만 구문은 점점 더 끔찍해집니다.

이벤트를 캡처할 컨텍스트를 지정하면 성능도 향상됩니다.위드 더live예를 들어, 전체 문서를 한 번 클릭할 때마다 선택기와 비교해야 합니다.a.myClass일치하는지 확인합니다.와 함께delegate, 그것은 단지 안에 있는 요소들일 뿐입니다.#containerElement. 이것은 분명히 성능을 향상시킬 것입니다.

마침내.live브라우저에서 다음을 찾을 것을 요구합니다.a.myClass 그것이 현재 존재하는지의 여부.delegate는 이벤트가 트리거될 때만 요소를 찾아 성능을 향상시킵니다.

---

NBdelegate사용하다live막후에서 뭐든 할 수 있도록live당신이 할 수 있는.delegate. 제 대답은 일반적으로 사용되는 것처럼 그것들을 다룹니다.

로 로 도live도 아니다delegate현대 jQuery에서 이벤트 위임을 하는 가장 좋은 방법입니다.새로운 구문(jQuery 1.7 기준)은 함수와 함께 제공됩니다.구문은 다음과 같습니다.

$('#containerElement').on('click', 'a.myClass', function() { ... });

다음을 제외하고는 모두 동일합니다.

• .delegate()힐수컬수다힐ue의nsew,ef을컬lneau .live()전체 페이지에서 이벤트를 처리해야 합니다.
• .live()된 DOM 선택합니다 DOM로합니다.

를 .delegate() 전화해요..live(), 하지만 추가 컨텍스트 매개 변수를 전달합니다.

https://github.com/jquery/jquery/blob/master/src/event.js#L948-950

에 저는 항상 를합니다..delegate()꼭, . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .body

$(document.body).delegate('.someClass', 'click', function() {
    // run handler
});

의 jQuery에는 jQuery가 있습니다.delegate기능성.호출할 때 선택기 또는 요소를 컨텍스트 속성으로 전달하면 됩니다..live(). 물론입니다, 페이지에 실어야 합니다.

$('.someClass', '#someContainer').live('click',function() {
    // run handler
});

그리고 당신은 당신과 같은 행동을 하고 있습니다..delegate().

두 가지 상황이 떠오릅니다.

1. 당신은 사용할 것입니다.delegatebody요소를 사용하면 됩니다.live그 대신에 더 간단합니다.

2. 라이브러리의 . 서 jQuery 라이브러리는 다음과 같습니다.delegate이벤트가 아직 구현되지 않았습니다.

이 예를 생각해 보십시오.

<ul id="items">  
   <li> Click Me </li>  
</ul>

$('#items').delegate('li', 'click', function() {  
    $(this).parent().append('<li>New Element</li>');  
});

DOM 요소를 선택기의 컨텍스트로 전달함으로써 라이브()를 위임자()가 하는 것과 (거의) 동일하게 동작하게 할 수 있습니다.기본 컨텍스트인 문서가 아닌 컨텍스트에 핸들러를 첨부합니다.아래 코드는 위에 표시된 위임자() 버전과 같습니다.

$("li", $("#items")[0]).live("click", function() {  
    $(this).parent().append("<li>New Element</li>");  
}); 

자원

하지만 더 나은 성능을 위해 대리인을 사용하는 것이 좋습니다. 여기를 참조하십시오.

언급URL : https://stackoverflow.com/questions/4579117/jquery-live-vs-delegate