jQuery에서 .bind(), .live() 및 .delegate() 간의 차이점 분석

Jquery를 배우는 친구들은

jQuery에서 .bind(), .live() 및 .delegate() 간의 차이점 분석을 참고할 수 있습니다.

DOM Tree

먼저 HMTL 문서의 DOM 트리를 시각화하는 것이 도움이 됩니다. 간단한 HTML 페이지는 다음과 같습니다:

Events Bubbling(이벤트 전파라고도 함)

링크를 클릭하면 링크 요소의 클릭 이벤트가 트리거되고, 이 이벤트는 실행을 트리거합니다. 해당 요소에 바인딩된 클릭 이벤트의 function 중 하나를 선택합니다.

코드는 다음과 같습니다:

$('a').bind('click',function(){alert('that 간지럽습니다!')})

따라서 클릭 작업은 경고 기능.

클릭 이벤트는 트리의 루트로 전파되어 상위 요소로 전파된 다음 하위 요소 중 하나에 대한 클릭 이벤트가 트리거되는 한 이벤트가 발생합니다. 그것에 전달되었습니다.

DOM을 조작하는 맥락에서 document는 루트 노드입니다.

이제 .bind(), .live() 및 .delegate()의 차이점을 더 쉽게 설명할 수 있습니다.
.bind()

코드는 다음과 같습니다.

$('a').bind('click',function(){alert('간지러워요!');})

이것이 가장 간단합니다. 바인딩 방법. JQuery는 문서를 스캔하여 모든 $('a') 요소를 찾고 경고 기능을 각 요소의 클릭 이벤트에 바인딩합니다.
.live()

코드는 다음과 같습니다.

$('a').live('click',function(){alert('간지러워요!')})

JQuery는 경고 기능을 바인딩합니다. $(문서) 요소에 추가하고 'click' 및 'a'를 매개변수로 사용합니다. 이벤트가 문서 노드까지 올라올 때마다 해당 이벤트가 클릭 이벤트인지, 이벤트의 대상 요소가 CSS 선택기'a'와 일치하는지 확인하고 일치하면 함수를 실행합니다.
라이브 메소드는 다음과 같이 문서 대신 특정 요소(또는 "컨텍스트")에 바인딩될 수도 있습니다.

코드는 다음과 같습니다.

$('a',$('#container') [0] ).live('click',function(){alert('간지러워요!')})

.delegate()

코드는 다음과 같습니다

$('#container'). Delegate('a', 'click',function(){alert('간지러워요!')})

JQuery는 문서를 스캔하여 $('#container')를 찾고 click 이벤트와 'a ' 경고할 매개변수인 CSS 선택기 함수는 $('#container')에 바인딩됩니다. 이벤트가 $('#container')까지 버블링될 때마다 이벤트가 클릭 이벤트인지, 이벤트의 대상 요소가 CSS 선택기와 일치하는지 확인합니다. 두 검사 결과가 모두 true이면 함수를 실행합니다.
이 프로세스는 .live()와 유사하지만 문서 대신 특정 요소에 핸들러를 바인딩한다는 점을 알 수 있습니다. 능숙한 JS 사용자는 $('a').live() == $(document).delegate('a') 라고 결론을 내릴 수도 있습니다. 그렇죠?
.delegate()가 .live()보다 사용하기 쉬운 이유
여러 가지 이유로 사람들은 일반적으로 라이브 메서드 대신 jQuery의 대리자 메서드를 선호합니다. 다음 예를 고려하십시오.

코드는 다음과 같습니다.

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

또는
$(document).delegate( 'a' , 'click', function() { 어쩌구() });
후자는 실제로 전자보다 빠릅니다. 왜냐하면 전자는 먼저 전체 문서를 스캔하여 모든 $('a') 요소를 찾아 저장해야 하기 때문입니다. jQuery 객체 로. live 함수는 나중에 판단하기 위해 'a'를 문자열 매개변수로 전달하기만 하면 되지만 $() 함수는 연결된 메서드가 .live()가 될 것임을 "알지" 못합니다.
반면에 대리자 메서드는 $(document) 요소만 찾아서 저장하면 됩니다.
이 문제를 해결하는 한 가지 방법은 $(document).ready() 외부에서 라이브 바운드를 호출하여 즉시 실행되도록 하는 것입니다. 이러한 방식으로 DOM이 채워지기 전에 실행되므로 요소가 발견되지 않거나 jQuery 객체가 생성됩니다.

유연성 및 체인 기능

라이브 기능도 꽤 헷갈립니다. 생각해 보세요. $('a') 객체 세트에 연결되어 있지만 실제로는 $(document) 객체에서 작동합니다. 이러한 이유로 무서운 방식으로 메서드를 자체적으로 연결하려고 시도할 수 있습니다. 사실 제가 말하려는 것은 라이브 메소드가 $.live('a',...) 형식의 전역 jQuery 메소드로서 더 의미가 있다는 것입니다.

CSS 선택자만 지원합니다

마지막으로 라이브 메서드에는 매우 큰 단점이 있습니다. 즉, 직접 CSS 선택자에서만 작동할 수 있어 유연성이 매우 떨어집니다.

CSS 선택기의 단점에 대해 자세히 알아보려면 jQuery .live() 및 .die() 탐색 문서를 참조하세요.

업데이트: 이 다음 섹션을 포함하도록 상기시켜 준 아래 댓글의 Hacker News 및 Ellsass의 Pedalpete에게 감사드립니다.

.bind() 대신 .live() 또는 .delegate()를 선택하는 이유

바인드가 더 명확하고 직접적인 것 같습니다. 그렇죠? 우리가 바인딩을 선호하는 데에는 두 가지 이유가 있습니다. 바인딩 대신 대리자 또는 라이브를 선택하세요.

1. 아직 DOM에 없을 수 있는 DOM 요소에 핸들러를 연결합니다. 바인딩은 핸들러를 개별 요소에 직접 바인딩하기 때문에 페이지에 아직 존재하지 않는 요소에는 핸들러를 바인딩할 수 없습니다.

2. $('a').bind(…)를 실행한 후 AJAX를 통해 페이지에 새 링크가 추가되면 새로 추가된 링크에 대해 바인드 핸들러가 유효하지 않게 됩니다. 반면에 Live 및 Delegate는 다른 상위 노드에 바인딩되므로 현재 또는 해당 상위 요소 내에 존재할 모든 요소에 대해 유효합니다.

3. 또는 단일 요소나 작은 요소 그룹에 핸들러를 연결하려면 동일한 함수를 DOM의 100개 요소에 하나씩 연결하고 반복하는 대신 하위 요소에서 이벤트를 수신하세요. 페이지의 모든 요소에 핸들러를 직접 연결하는 것보다 하나(또는 작은 집합)의 상위 요소에 핸들러를 연결하면 성능상의 이점이 있습니다.

확산 중지

마지막으로 알려드리고 싶은 알림은 이벤트 확산에 관한 것입니다. 일반적으로 다음과 같은 이벤트 메소드를 사용하여 핸들러 함수의 실행을 종료할 수 있습니다.

코드는 다음과 같습니다.

$('a').bind('click',function(e){ 
e.preventDefault() 
e.stopPropagation()} 
)

그러나 live 또는 대리자 메소드를 사용할 경우 핸들러 함수가 실제로 실행되지 않습니다. , 핸들러가 실제로 바인딩된 요소까지 이벤트가 버블링될 때까지 함수는 실행되지 않습니다. 이 시점에서는 .bind()의 다른 핸들러 함수가 이미 실행되었습니다.

위 내용은 jQuery에서 .bind(), .live() 및 .delegate() 간의 차이점 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!