바인딩과 라이브, 위임과 jQuery의 바인딩 이벤트 간의 방법과 차이점에 대한 자세한 설명

jQuery는 네 가지 event 모니터링 방법, 즉 바인딩, 라이브, 위임 및 켜기를 제공합니다. 모니터링 차단을 해제하는 데 해당하는 기능은 unbind, die, undelegate 및 off입니다.

4개의 알려진 목록 요소가 있습니다:

목록 요소 1

목록 요소 2

목록 요소 3

목록 요소 4

1. 바인딩

bind(type,[data],function(eventObject))

bind는 더 자주 사용되는 요소이며 해당 기능은 Bind입니다. 선택한 요소에 대한 특정 이벤트 유형의 청취 기능은 다음과 같습니다.

type: 클릭, 변경, 마우스오버 등의 이벤트 유형

data: 전달된 매개변수 청취 기능으로, event.data를 통해 획득됩니다. 선택 사항;

기능: 이벤트 개체를 전달할 수 있습니다. 여기서 이벤트는 jQuery로 캡슐화된 이벤트 개체이므로 사용할 때 주의해야 합니다.

　소스 코드:

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}

　on 메소드가 내부적으로 호출되는 것을 볼 수 있습니다.

　바인드의 특징은 리스너를 대상 요소에 하나씩 바인딩한다는 것입니다. 페이지의 요소가 동적으로 추가되지 않는 경우에도 사용에는 문제가 없습니다. 그러나 "목록 요소 5"가 목록에 동적으로 추가되면 클릭해도 응답이 없으므로 다시 바인딩해야 합니다.

　2. live

live(type, [data], fn)

live의 매개변수는 바인딩과 동일합니다. 무엇이 문제인가요? 먼저 소스 코드를 살펴보겠습니다.

live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}

live 메서드는 리스너를 바인딩하지 않는 것을 볼 수 있습니다. 자체(this) 본문이지만 this.context에 바인딩되어 있습니다.

live는 이벤트 위임 메커니즘을 사용하여 이벤트 모니터링 및 처리를 완료하고 노드 처리를 document에 위임합니다.

이벤트 위임을 사용하면 새로 추가된 요소가 청취자를 다시 묶을 필요가 없다는 장점이 한눈에 보입니다.

　3. 위임

리스닝 이벤트를 가장 가까운 상위 요소에 바인딩합니다. 소스 코드:

delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}

이제 우리는 이벤트 위임을 사용할 수 있을 뿐만 아니라 위임 대상도 선택할 수 있습니다. 결국, 같은 사람을 항상 괴롭히는 것은 좋지 않습니다. 결국 위임 개체를 선택하는 방법에 대한 특정 전략이 필요합니다. 상위 요소가 많을 수 있습니다. 가장 가까운 "안정적인" 요소를 선택하는 것이 원칙이라고 생각합니다. 가장 가까운 요소를 선택하는 이유는 이벤트가 더 빠르게 발생하고 최대한 빨리 처리될 수 있기 때문입니다. 소위 "안정적"이란 상위 요소가 처음부터 페이지에 있고 동적으로 추가되지 않으며 나중에 사라지지 않음을 의미합니다. 이렇게 하면 해당 하위 요소가 항상 모니터링될 수 있습니다.

　　4. on

on(type,[selector],[data],fn)

매개변수는 델리게이트의 매개변수와 유사하지만 약간의 차이점이 있습니다. 첫째, 유형과 선택기의 위치가 변경되었으며, 둘째, 선택기가 선택사항이 되었습니다.

$('#myol li').on('click',getHtml);

이벤트를 보실 수 있습니다.current대상은 li 자체이며, 바인드와 같은 효과를 가집니다. 선택기를 전달하는 것은 대리자와 동일한 의미를 가지며 매개변수의 순서가 다르다는 점을 제외하면 다른 모든 것은 완전히 동일합니다.

위 내용은 바인딩과 라이브, 위임과 jQuery의 바인딩 이벤트 간의 방법과 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!