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

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

jQuery의 .on() 메서드는 두 가지 별개의 이벤트 처리 접근 방식을 제공합니다. 그리고 위임했습니다. 차이점은 이벤트 처리 범위에 있습니다.

직접 이벤트 처리

직접 이벤트 처리에서는 이벤트 핸들러가 대상 요소에 직접 바인딩됩니다. 즉, 이벤트가 해당 요소의 하위 항목이 아닌 해당 요소에서 직접 발생할 때만 핸들러가 실행됩니다. 예:

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

위임된 이벤트 처리

위임된 이벤트 처리에서 이벤트 핸들러는 상위 요소에 바인딩되며 선택기는 하위 요소를 지정합니다. 핸들러를 트리거해야 합니다. 이를 통해 핸들러는 지정된 범위 내 어디에서나 발생하는 이벤트를 처리할 수 있습니다. 예를 들면 다음과 같습니다.

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

가장 중요한 차이점은 사례 1의 경우 각 스팬이 자체 이벤트 처리를 직접 담당한다는 것입니다. 사례 2의 경우 컨테이너 요소(div#target)는 하위 요소(span.green)에 대한 이벤트 처리 책임을 위임받습니다.

비교 예시

제공된 예는 div#target 내의 녹색 범위를 클릭하는 컨텍스트에서 직접 이벤트 처리와 위임 이벤트 처리 간의 차이점을 보여줍니다. 두 방법 모두 클릭한 범위의 클래스에 경고하는 동일한 동작을 달성합니다.

직접 접근:

• 각 녹색 범위는 자체 클릭 이벤트 핸들러에 바인딩됩니다.
• div#target 내에서 생성된 새 녹색 범위에는 바인딩된 이벤트 핸들러가 없습니다.

위임된 접근 방식:

• 이벤트 핸들러는 div#target에 바인딩되며, 위임된 선택자는span.green입니다.
• div#target 내의 기존 또는 향후 녹색 범위를 클릭하면 처리됩니다.
• div#target은span.green과 일치하는 모든 하위 요소를 대신하여 이벤트를 처리합니다.

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