jQuery 코드 최적화 이벤트 delegation_jquery

jQuery는 바인딩 및 위임된 이벤트를 위한 .bind(), .live() 및 .delegate() 메서드를 제공합니다. 이 기사에서는 이러한 방법의 내부 구현에 대해 설명하고 장점, 단점 및 적용 가능한 경우를 보여줍니다.

이벤트 위임

현실에는 이벤트 위임의 사례가 많습니다. 예를 들어, 세 명의 동료가 월요일에 특급 배송을 받을 것으로 예상됩니다. 속달 서명에는 두 가지 방법이 있습니다. 하나는 회사 문 앞에서 세 사람이 속달 배달을 기다리게 하는 것이고, 다른 하나는 접수원에게 귀하를 대신하여 서명하도록 맡기는 것입니다. 실제로 우리는 주로 위탁 솔루션을 사용합니다(회사는 문 앞에 서서 빠른 배송을 기다리는 직원이 너무 많은 것을 용납하지 않습니다). 프론트 데스크의 MM이 특급 배송을 받은 후 수령인이 누구인지 확인한 다음 수령인의 요구 사항에 따라 서명하고 대신 비용을 지불합니다. 이 솔루션의 또 다른 장점은 신입사원이 아무리 많이 오더라도 프론트 데스크 MM이 신입사원에게 보낸 특급배송을 확인하고 대신 서명해 준다는 점이다.

DOM이 페이지의 각 요소에 이벤트를 전달하면 일반적으로 해당 요소가 이벤트 버블링 단계에서 이벤트를 처리한다는 것을 알고 있습니다. body > div > a와 같은 구조에서 a 요소를 클릭하면 클릭 이벤트가 a에서 div 및 body(즉, 문서 개체)로 버블링됩니다. 따라서 a, div, body 요소에서 발생하는 클릭 이벤트도 처리할 수 있습니다. 이벤트 전파(여기서는 버블링) 메커니즘을 사용하여 이벤트 위임을 달성할 수 있습니다. 특히 이벤트 위임은 이벤트 대상이 이벤트 자체를 처리하지 않고 처리 작업을 상위 요소나 조상 요소 또는 루트 요소(문서)에 위임하는 것을 의미합니다.

.bind()
사용자가 각 셀을 클릭하여 해당 내용과 관련된 추가 정보를 볼 수 있는 테이블이 있다고 가정합니다. 정보(예: 도구 설명을 통해) 이렇게 하려면 클릭 이벤트를 각 셀에 바인딩하면 됩니다.

$("info_table td").bind("click", function(){/*Show more information*/}); >
문제는 클릭 이벤트가 바인딩된 테이블에 10개의 열과 500개의 행이 있는 경우 5000개의 셀을 찾아 순회하면 5000개의 td 요소와 해당 이벤트를 저장하는 동시에 스크립트 실행 속도가 상당히 느려진다는 것입니다. 핸들러는 또한 많은 메모리를 차지합니다(모든 사람이 물리적으로 문 앞에 서서 배달을 기다리게 하는 것과 유사).

이전 예를 기반으로 간단한 사진 앨범 애플리케이션을 구현하려면 각 페이지마다 50장의 사진(50셀)의 썸네일만 표시하고 사용자는 "페이지 x"(또는 "다음 페이지")를 클릭합니다. ) 링크는 Ajax를 통해 서버에서 또 다른 50장의 사진을 동적으로 로드할 수 있습니다. 이 경우에는 .bind() 메소드를 사용한 50개 셀에 대한 바인딩 이벤트가 다시 허용되는 것으로 보입니다.

그렇지 않습니다. .bind() 메소드를 사용하면 첫 번째 페이지의 50개 셀에만 클릭 이벤트가 바인딩됩니다. 동적으로 로드되는 후속 페이지의 셀에는 이 클릭 이벤트가 없습니다. 즉, .bind()는 호출 시 이미 존재하는 요소에만 이벤트를 바인딩할 수 있으며 향후 추가될 요소에는 이벤트를 바인딩할 수 없습니다(신입 직원이 빠른 배송을 받을 수 없는 것과 유사).

이벤트 위임을 통해 위의 두 가지 문제를 해결할 수 있습니다. 코드에 따라 .bind() 메서드 대신 jQuery 1.3에 추가된 .live() 메서드를 사용하세요.

$("#info_table td").live("click",function() {/*추가 정보 표시*/})

여기서 .live() 메소드는 클릭 이벤트를 $(document) 객체에 바인딩합니다(그러나 이는 코드에서 반영될 수 없습니다. .live() 메서드가 비판을 받는 중요한 이유(나중에 자세히 설명), $(document)를 한 번만 바인딩하면(5000번은 고사하고 50번도 아님) 후속 동적을 처리할 수 있습니다. 로딩 중 포토셀의 클릭 이벤트입니다. 이벤트를 수신하면 $(document) 객체는 이벤트 유형과 이벤트 대상을 확인합니다. 클릭 이벤트이고 이벤트 대상이 td이면 이에 위임된 핸들러가 실행됩니다.


.live()
현재까지는 모든 것이 완벽해 보입니다. 불행하게도 그렇지 않습니다. .live() 메소드는 완벽하지 않기 때문에 다음과 같은 큰 단점이 있습니다.
$() 함수는 현재 페이지의 모든 td 요소를 찾아 jQuery 객체를 생성하지만 확인 시에는 사용되지 않습니다. 이 td 요소 컬렉션은 대신 선택기 표현식을 사용하여 event.target 또는 해당 상위 요소와 비교하므로 이 jQuery 객체를 생성하면 불필요한 오버헤드가 발생합니다.
이벤트는 기본적으로 $(document) 요소에 바인딩됩니다. . DOM 중첩 구조가 매우 깊은 경우 다수의 상위 요소를 통한 이벤트 버블링은 성능 저하를 초래합니다.
는 직접 선택한 요소 뒤에만 배치할 수 있으며 연속적인 DOM 순회 방법 뒤에는 사용할 수 없습니다. , $("#infotable td ").live...는 작동하지만 $("#infotable").find("td").live...는 작동하지 않습니다.
는 td 요소를 수집하고 jQuery 객체를 생성합니다. , 그러나 실제 작업은 $( document) 개체이므로 수수께끼입니다.


해결책
불필요한 jQuery 객체 생성을 방지하려면 $(document).ready( ) 메소드 외부 호출 .live():