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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

더보기

인기 기사

KB5055612 수정 방법 Windows 10에 설치되지 않습니까?

4 몇 주 전 By DDD

<gum> : Bubble Gum Simulator Infinity- 로얄 키를 얻고 사용하는 방법

4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

<garden> : 정원 재배 - 완전한 돌연변이 가이드

3 몇 주 전 By DDD

Nordhold : Fusion System, 설명

4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

Mandragora : 마녀 트리의 속삭임 - Grappling Hook 잠금 해제 방법

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

자바 튜토리얼

1672

14

Cakephp 튜토리얼

1428

52

라라벨 튜토리얼

1332

25

PHP 튜토리얼

1277

29

C# 튜토리얼

1257

24

더보기