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

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

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

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

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

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

데이터: 매개변수 이벤트를 통해 리스닝 함수에 전달되면 .data가 획득됩니다. 선택사항;

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

bind 소스 코드:

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

bind의 특징은 리스너를 대상 요소에 바인딩한다는 것입니다. 동적으로 추가할 때 사용하는데 문제가 없습니다. 그러나 "목록 요소 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);

Three: Live에는 이런 단점이 있어서 노인이 이렇게 무거운 짐을 지고 있으니, not 리스너가 문서에 바인딩되어 있으므로 가장 가까운 상위 요소에 바인딩하는 것이 더 낫지 않을까요? 일반적인 논리에 따라 델리게이트가 탄생했습니다.

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

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을 사용하는 것이 공식적인 권장사항입니다. 그것들을 대체하는 방법은 그렇게 간단하게 작성할 필요가 없다고 생각합니다. 차이점을 이해하고 나면 당연히 어렵지 않을 것입니다.