jQuery의 직접 이벤트 처리와 위임된 이벤트 처리: 언제 어느 것을 사용해야 합니까?

jQuery .on()을 사용한 직접 이벤트 처리와 위임된 이벤트 처리

이벤트 처리에 jQuery .on() 메서드를 활용하는 경우 이는 직접 이벤트 핸들러와 위임 이벤트 핸들러의 근본적인 차이점입니다.

직접 이벤트 핸들러는 이름에서 알 수 있듯이 이벤트 리스너를 특정 요소에 직접 연결합니다. 예:

$("div#target span.green").on("click", function() {
   alert($(this).attr("class") + " is clicked");
});

이 시나리오에서 클릭 이벤트 리스너는 div#target 컨테이너 내의 각span.green 요소에 직접 바인딩됩니다.

반면에 위임된 이벤트 핸들러 , 이벤트 리스너를 상위 요소에 연결하고 선택기와 일치하는 하위 요소에 이벤트 처리를 위임합니다. 예를 들면 다음과 같습니다.

$("div#target").on("click", "span.green", function() {
   alert($(this).attr("class") + " is clicked");
});

여기서 클릭 이벤트 리스너는 div#target 컨테이너에 연결된 다음 클릭 처리를 모든 하위 span.green 요소에 위임합니다.

키 차이점은 위임된 이벤트 처리에서 이벤트가 상위 요소에서 직접 발생하면 핸들러가 호출되지 않는다는 것입니다. 대신 이벤트가 DOM 트리에 버블링되고 핸들러는 제공된 선택기와 일치하는 하위 요소에 대해서만 호출됩니다. 이벤트 리스너는 명시적 바인딩 없이 일치하는 모든 하위 항목에 자동으로 적용되므로 새 요소가 추가되거나 제거될 수 있는 동적 콘텐츠에 유용할 수 있습니다.

제공된 예에서 직접 및 위임 이벤트 모두 처리기는 추가되거나 제거된 동적 요소가 없기 때문에 동일한 동작을 발생시킵니다. 그러나 새로운span.green 요소가 페이지에 동적으로 추가된 경우 위임된 이벤트 핸들러만 해당 클릭 이벤트를 처리합니다.

위 내용은 jQuery의 직접 이벤트 처리와 위임된 이벤트 처리: 언제 어느 것을 사용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!