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

DOM 트리

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

이벤트 버블링(이벤트 전파라고도 함)

링크를 클릭하면 링크 요소의 클릭 이벤트가 트리거되고, 이는 해당 요소의 클릭 이벤트에 바인딩된 모든 기능의 실행을 트리거합니다.

코드 복사 코드는 다음과 같습니다.

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

따라서 클릭 조작을 하면 경고 기능이 실행됩니다.

그런 다음 클릭 이벤트는 트리의 루트를 향해 전파되어 상위 요소로 전파된 다음 하위 요소 중 하나에서 클릭 이벤트가 트리거되는 한 이벤트는 다음 요소로 전달됩니다. 그것.

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

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

코드 복사 코드는 다음과 같습니다.

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

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

코드 복사 코드는 다음과 같습니다.

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

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

코드 복사 코드는 다음과 같습니다.

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

.delegate()

코드 복사 코드는 다음과 같습니다.

$('# 컨테이너').delegate('a','click',function(){alert('간지러워요!')})

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

코드 복사 코드는 다음과 같습니다.

$('a'). live('클릭', function() { 어쩌구() });
또는
$(document).delegate('a', 'click', function() { blah() })
후자는 전자를 스캔해야 하기 때문에 실제로 전자보다 빠릅니다. 전체 문서는 모든 $('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()의 다른 핸들러 함수가 이미 실행되었습니다.