jQuery 이벤트 바인딩에 대한 간략한 개요 및 적용.on()_jquery

며칠 전 "JQuery Basics Tutorial"을 보다가 event delegation을 보다가 live() 메소드가 별로 상세하지 않아서 live()와 Delegate()에 대해 검색해봤습니다.

그런데 live()가 어딘가에서 제거된 것을 봤습니다. 죄송합니다. 그런데 최신 jq 소스 코드를 보러 갔습니다. 물론 지금은 버전 1.9.1인지 모르겠습니다. live()는 이전 버전이었습니다. 어떤 버전이 제거되었나요? 죄송합니다. 이전에는 이를 인식하지 못했습니다.

소스 코드를 살펴보면, 바인딩()과 대리자()가 모두 on()으로 구현되어 있는 것을 발견했습니다. on() 설명은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

.on( events [ , selector ] [, data ], handler(eventObject) )

$('button').on('click',function()과 같은 간단한 이벤트 바인딩 {}); 바인딩()도 다르지 않습니다.

이벤트를 더 많은 요소에 바인딩해야 하는 경우 이벤트 위임에 우선순위를 부여하면 성능상의 이점을 얻을 수 있습니다. 예:

위 그림과 같이 클릭 이벤트를 문서 개체에 바인딩합니다. 페이지의 모든 요소에서 발생하는 클릭 이벤트가 문서 개체에 버블링되어 처리됩니다.

.on(): 선택기 설명에서 두 번째 선택적 매개변수를 확인하세요. 아래와 같이 두 번째 매개변수인 선택 버튼이 추가됩니다:

결과:

이벤트가 문서 개체에 버블링되면 이벤트 대상을 감지합니다. 들어오는 선택기(여기 버튼)와 일치하면 이벤트가 트리거되고, 그렇지 않으면 트리거되지 않습니다.

.on()도 객체 매개변수를 받을 수 있다는 점에 유의하세요. 객체의 속성은 이벤트 유형이고 속성 값은 이벤트 처리 함수입니다. 다음은 공식 문서의 예입니다.

마지막으로 원래 live() 메서드와 처리 함수는 기본적으로 문서 객체에 바인딩되어 있으며 변경할 수 없다는 점입니다. DOM 중첩 구조가 매우 깊은 경우 많은 수의 상위 요소를 통한 이벤트 버블링이 발생합니다. 큰 성능 손실. .on() 메서드를 사용하면 이벤트는 $() 함수의 선택기 표현식과 일치하는 요소에만 바인딩되므로(위의 예에서는 단순화를 위해 문서에 바인딩됨) 이벤트의 정확한 위치를 지정할 수 있습니다. 페이지 부분과 이벤트 버블링의 오버헤드도 줄일 수 있습니다. Delegate()는 on()과 동일합니다. 결국 on()을 사용하여 구현됩니다.