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

jQuery .on()의 직접 이벤트 처리와 위임된 이벤트 처리

jQuery .on() 메서드는 이벤트 처리를 위한 두 가지 옵션을 제공합니다. 직접 및 위임. 위임된 처리의 맥락에서 문서에는 이벤트가 바인딩된 요소에서 직접 발생할 때 이벤트 핸들러가 호출되지 않고 선택기와 일치하는 하위 항목에 대해서만 호출된다고 명시되어 있습니다. 그러나 이는 "모든 요소에 대해 핸들러를 실행한다"는 것이 정확히 무엇을 의미하는지에 대한 의문을 제기합니다.

직접 이벤트 처리

직접 이벤트 처리에서 이벤트 핸들러는 다음 구문을 사용하여 요소에 직접 할당됩니다.

$("selector").on("event", function() {...});

이 경우 이벤트 핸들러는 일치하는 각 요소에 연결됩니다. 선택기. 예를 들어, 다음 코드는 클릭 핸들러를 모든

내에 녹색 클래스가 있는 요소 ID 대상:

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

위임된 이벤트 처리

위임된 이벤트 처리에서 이벤트 핸들러는 다음 구문을 사용하여 상위 요소에 할당됩니다.

$("parent").on("event", "child selector", function() {...});

이 경우 이벤트 핸들러는 상위 요소에 할당되지만 상위 요소에서 발생하는 이벤트에만 응답합니다. 하위 선택자와 일치하는 하위 요소입니다. 이 접근 방식은 페이지가 처음 로드될 때 존재하지 않는 동적 콘텐츠에 이벤트 핸들러를 연결하는 데 유용합니다.

다음 예를 고려하세요.

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

이 예에서는 클릭 핸들러가 연결됩니다.

id 타겟으로. 그러나 에 있는 하위 요소에서 발생하는 클릭에만 응답합니다. 클래스가 녹색인 요소.

주요 차이점

직접 이벤트 처리와 위임 이벤트 처리의 주요 차이점은 대상 요소와 이벤트를 처리하는 요소 간의 관계에 있습니다. . 직접 이벤트 처리에서 대상 요소는 이벤트를 처리하는 요소이기도 합니다. 위임된 이벤트 처리에서 대상 요소는 이벤트를 처리하는 요소의 부모입니다.

실용적 의미

일반적으로 위임된 이벤트 처리는 작업할 때 선호됩니다. 시간이 지남에 따라 변경될 수 있는 동적 콘텐츠입니다. 이벤트 핸들러를 상위 요소에 연결하면 페이지에 새 요소가 추가되더라도 이벤트가 처리되도록 할 수 있습니다. 시간이 지나도 변하지 않는 정적 콘텐츠에는 직접적인 이벤트 처리가 더 적합합니다.

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