Jquery에서 이벤트를 바인딩하는 방법은 몇 가지입니까?

jquery에는 이벤트를 바인딩하는 4가지 방법이 있습니다. 즉, 바인딩(), live(), 대리자() 및 on() 메서드는 이벤트를 기존 요소에만 바인딩할 수 있고, live()는 이벤트를 바인딩할 수 있습니다. () 및 대리자()는 모두 향후 새로 추가되는 요소에 대한 이벤트 바인딩을 지원합니다.

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6.1 버전, Dell G3 컴퓨터.

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

이러한 방법의 차이점은 다음과 같습니다.

1.bind() 함수는 기존 요소에 대해서만 이벤트를 설정할 수 있지만 live(), on() 및 Delegate()는 모두 향후에 새로운 추가 이벤트를 지원합니다.

2. jquery 버전 1.7 이전에는 바인딩() 함수가 상대적으로 인기가 있었지만 버전 1.7이 나온 이후에는 더 이상 공식적으로 권장되지 않으며 대체 함수인 on()도 새로 추가되었습니다. 버전 1.7. 함수는 버전 1.9에서 삭제된 live() 함수를 대체하는 데에도 사용할 수 있습니다. [관련 권장 사항: "jQuery Video Tutorial"]

3. 비슷하지만 실행 속도, 유연성 및 CSS 선택기 지원 측면에서 live() 함수는 대리자()보다 나쁩니다. 4. 바인딩()은 Jquery의 모든 버전을 지원합니다. jquery1.4.2+ 지원; on() jquery1.7+ 지원

다음에서 이러한 메서드를 자세히 소개합니다.

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

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

        유형: 클릭, 변경, 마우스오버,

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

함수: 이벤트 객체를 전달할 수 있는 이벤트는 jQuery로 캡슐화된 이벤트 객체로, 이를 사용할 때 주의해야 합니다.

Bind의 소스 code:

  bind: function( types, data, fn ) {

  return this.on( types, null, data, fn );

  }

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

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

jQuery에는 a.click(function(){});, a.change(function(){}); 등과 같은 이벤트 바인딩에 대한 약어도 있습니다. 해당 기능은 바인딩과 동일하며 단지 약어.

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. Delegate 및 on

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에서 이벤트를 바인딩하는 방법은 몇 가지입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!