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

이 장에서는 jQuery에서 이벤트를 바인딩하는 네 가지 방법을 소개합니다. 필요한 친구가 참고할 수 있기를 바랍니다.

jQuery는 바인딩, 라이브, 위임, 켜기 등 4가지 이벤트 모니터링 방법을 제공합니다. unlisten에 해당하는 기능은 unbind, die, undelegate 및 off입니다. 이 글을 통해 하나씩 자세히 소개하겠습니다. 관심 있는 친구들은 함께 살펴보세요

jQuery는 이벤트를 바인딩하는 다양한 방법을 제공하며 각 방법에는 고유한 특징이 있습니다. , 코드를 작성할 때 올바른 선택을 하여 우아하고 유지 관리하기 쉬운 코드를 작성하는 데 도움이 됩니다. jQuery에서 이벤트를 바인딩하는 방법을 살펴보겠습니다.

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

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

bind가 더 자주 사용됩니다. 한 가지 유형은 특정 이벤트 유형의 청취 기능을 선택한 요소에 바인딩하는 것입니다. 매개변수의 의미는 다음과 같습니다.

유형: 클릭, 변경, 마우스오버 등과 같은 이벤트 유형입니다. .;

data: 청취 함수에 전달된 매개변수는 event.data를 통해 얻습니다. 선택사항;

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

bind 소스 코드:

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

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

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

2: 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);

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

위는 에디터가 소개한 jQuery 바인딩 이벤트의 4가지 방법입니다. 모두에게 도움이 되었으면 좋겠습니다.