jQuery를 사용하여 이벤트를 바인딩하는 네 가지 방법

jQuery는 이벤트를 바인딩하는 다양한 방법을 제공합니다. 각 방법에는 고유한 특성이 있습니다. 이들 간의 유사점과 차이점을 이해하면 코드를 작성할 때 올바른 선택을 하여 코드를 우아하고 유지 관리하기 쉽게 만드는 데 도움이 됩니다. jQuery에서 이벤트를 바인딩하는 방법을 살펴보겠습니다.

jQuery는 바인딩, 라이브, 위임, 켜기의 네 가지 이벤트 모니터링 방법을 제공합니다. 모니터링 차단을 해제하는 데 해당하는 기능은 unbind, die, undelegate 및 off입니다. 살펴보기 전에

1: 바인딩(type,[data],function(eventObject))

더 자주 사용되는 바인딩은 요소를 선택하는 기능입니다. 특정 이벤트 유형의 청취 기능은 다음과 같습니다.

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

데이터: 전달되는 매개변수 이벤트를 통해 청취 기능에 .data가 획득됩니다. 선택사항;

함수: 이벤트 객체를 전달할 수 있는 청취 함수. 여기서 이벤트는 jQuery로 캡슐화된 이벤트 객체이므로 사용 시 주의가 필요합니다.

바인드 소스 코드 :

bind: function( types, data, fn ) {
 
  return this.on( types, null, data, fn );
 
  }
 
$('#myol li').bind('click',getHtml);

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

jQuery에는 a.click(function(){});, a.change(function(){}); 등과 같은 간단한 이벤트 바인딩 방법도 있습니다. 해당 기능은 다음과 같습니다. 바인딩, 만(Bind, only) 단지 약어일 뿐입니다.

둘: live(type, [data], fn)

live의 매개변수는 바인딩과 동일합니다. 먼저 소스 코드를 살펴보겠습니다. 🎜>

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

라이브 메소드가 리스너를 자체(this)에 바인딩하지 않고 this.context에 바인딩하는 것을 볼 수 있습니다. 사실 이것은 요소의 제한된 범위입니다. 다음 코드를 읽으면 명확해집니다.

$('#myol li').context; //document
 
$('#myol li','#myol').context; //document
 
$('#myol li',$('#myol')[0]); //ol

일반적으로 세 번째 방법과 같은 선택자를 사용하지 않습니다. 이 컨텍스트는 일반적으로 문서, 즉 라이브 메서드가 리스너를 문서에 바인딩하는 것으로 간주됩니다. 리스너를 요소에 직접 바인딩하지 않고 이벤트 위임 메커니즘을 기억하시나요? 그렇지 않은 경우 여기를 클릭하여 다시 불러올 수 있습니다. Live는 이벤트 위임 메커니즘을 사용하여 이벤트 모니터링 및 처리를 완료하고 노드 처리를 문서에 위임합니다. 청취 함수에서 event.currentTarget을 사용하여 현재 이벤트를 캡처하는 노드를 얻을 수 있습니다. 다음 예를 보면 알 수 있습니다.

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

셋: Live에는 이런 단점이 있어서 노인이 너무 무거운 부담을 갖고 있기 때문에 청취자를 문서에 묶을 수는 없을까라고 생각했습니다. 가장 가까운 상위 요소를 사용하는 것이 더 낫지 않습니까? 일반적인 논리에 따라 델리게이트가 탄생했습니다.

매개변수에는 이벤트를 트리거하는 대상 요소를 지정하는 데 사용되는 추가 선택기가 있습니다. 리스너는 이 메서드를 호출하는 요소에 바인딩됩니다. 소스 코드를 살펴보세요:

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

가 다시 호출하고 선택기를 on으로 전달합니다. 이 부분이 정말 중요한 것 같습니다. 지금은 그냥 무시하세요. 먼저 예를 살펴보겠습니다.

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

너무 많이 읽은 후에는 이 내용의 실제 모습을 보고 싶습니다. 다음은 다음과 같습니다.

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

매개변수 및 대리자 거의 동일하지만 여전히 미묘한 차이점이 있습니다. 첫째, 유형과 선택기가 위치가 변경되었으며 둘째, 선택기가 선택 사항이 되었습니다. 위치를 바꾸는 이유는 확인하기 어렵지만, 시각적으로 좀 더 편안하게 하기 위해서일 것입니다.

선택기를 통과하지 않은 예를 살펴보겠습니다.

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

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

드디어 on의 실제 역할을 확인했습니다. 그러면 이벤트 바인딩 방법이 이렇게 많은데 어떻게 선택해야 할까요?

사실 이 문제는 전혀 걱정할 필요가 없습니다. 이미 알고 계시기 때문에 실제 상황에 맞게 사용하시면 됩니다. 하지만 다른 메소드는 내부적으로 호출하여 완성되기 때문에 최대한 on을 사용하는 것이 공식적인 권장사항입니다. 그것들을 대체하는 방법은 그렇게 간단하게 작성할 필요가 없다고 생각합니다. 차이점을 이해하고 나면 당연히 어렵지 않을 것입니다.