jQuery 클래스 선택기 이벤트 바인딩은 각 인스턴스에 eventHandler를 연결합니까?

Question

Im 학습 jQuery와 내가 $('.className').bind('click',function(){}) 방법에 대해 읽었을 때 의심이 한 번 발생했습니다.

이 메서드는 내 이벤트 처리기를 DOM의 각 className 인스턴스에 연결합니까? 그렇다면 좋은 접근 방식이 될 것입니다. 예를 들어, 페이지의 많은 인스턴스에 이벤트 핸들러를 연결하는 것은 오버 헤드가 옳습니다.

또는 이벤트 위임을 사용하고 있습니까? 예를 들어 처리기가 e.target equalTo className을 사용하고 click 이벤트를 실행하는 공통 부모에 바인딩되어 있으므로 처리기가 하나의 DOM 요소에만 바인딩됩니다.

제발 이해 좀 도와주세요. 감사.

---

한 번 더 의심됩니다. 과부하가 발생한 각 DOM 요소에 이벤트를 첨부하면됩니까? 실행 중에 브라우저에 추가로드가 발생합니까? 아니면 dom을 무겁게 만들까요?

Answer 1

확실히 각 요소에 콜백을 바인딩합니다. 선택기와 일치하는 요소가 많은 경우에는 이벤트 위임을 사용하는 것이 좋습니다.

그러나 수동으로 e.target을 사용하여 주변을 돌릴 필요는 없습니다. jQuery를은이 scenraio을 위해 특별히 .on() 방법을 오버로드했습니다 요소의 최소 금액은 이벤트 리스너에 의해 영향을받을 수 있도록

$('#parent').on('click', '.children', function(){}); 

당신은 항상 가능한 가장 가까운 부모에 이벤트 핸들러를 첨부해야한다.

Answer 2

$('.className').bind('click',function(){}) dom ... 이벤트 위임에있는 각 사용 가능한 요소에 이벤트 처리기를 첨부합니다. 대상 요소에있는 이벤트 만 듣는 대신 문제가 발생합니다.이 이벤트는 내부에서 발생하는 모든 클릭 이벤트를 평가해야합니다. 위임 된 부모가 위임 대상 선택기를 다시 사용합니다 ...

나는 많은 요소가있는 경우 이벤트 위임을 선호하지만 바인딩 대신 가장 직접적인 공통 조상 요소에 핸들러를 첨부하는 것을 선호합니다 ~ body 또는 document