jQuery의 직접 이벤트 처리와 위임된 이벤트 처리: 어떤 `.on()` 접근 방식을 선택해야 합니까?

jQuery에서 이벤트 처리 위임: 직접 대 위임 .on()

jQuery .on() 메서드를 사용하면 이벤트 핸들러를 등록할 수 있습니다. DOM 요소에. 이벤트 처리에 대한 두 가지 접근 방식은 직접 바인딩과 위임 바인딩입니다. 직접 바인딩은 이벤트 핸들러를 특정 요소에 직접 연결하는 반면, 위임 바인딩은 상위 요소 내의 선택기와 일치하는 요소에 대한 이벤트 처리를 허용합니다.

위임 이벤트 핸들러에 관한 해당 단락의 마지막 문장에는 jQuery가 "실행"된다고 명시되어 있습니다. 모든 요소에 대한 핸들러...선택기와 일치합니다." 이는 DOM의 이벤트 버블링 메커니즘을 나타냅니다.

선택기와 함께 .on()을 사용하여 위임된 이벤트 핸들러를 상위 요소에 연결하면 선택한 요소뿐만 아니라 해당 하위 요소에서도 이벤트가 처리됩니다. 선택자와 일치합니다. 이벤트가 DOM 트리에 표시되면서 jQuery는 경로에 있는 요소가 선택기와 일치하는지 확인하고 일치하는 항목이 발견되면 핸들러를 트리거합니다.

차이점을 설명하려면 다음 예를 고려하세요.

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

이것은 클릭 핸들러를 모든 #target div 내에 녹색 클래스가 있는 요소입니다. 이러한 각 요소는 클릭 이벤트를 독립적으로 처리합니다.

반대로 다음은 위임 바인딩을 사용합니다.

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

여기서 클릭 이벤트 핸들러는 #target div에 연결되지만 "녹색"과 일치하는 요소에 대한 "이벤트 버블링" 선택기. 이는 미래의 #target div 내에 생성된 "녹색" 클래스가 있는 요소도 클릭 핸들러를 트리거합니다.

위임 바인딩은 새 요소가 이벤트를 상속하도록 보장하므로 페이지에서 요소를 동적으로 추가 및 제거할 때 특히 유용합니다. 수동 바인딩 없이도 동작을 처리할 수 있습니다.

위 내용은 jQuery의 직접 이벤트 처리와 위임된 이벤트 처리: 어떤 `.on()` 접근 방식을 선택해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!