[javascript] 직접 대 위임-jQuery .on ()

Program / 글쓴이

jQuery .on () 메소드를 사용하여 직접 및 위임 된 이벤트 핸들러 의이 특별한 차이점을 이해하려고합니다 . 특히이 단락의 마지막 문장은 다음과 같습니다.

A는 경우 selector제공되는 이벤트 핸들러라고 위임 . 이벤트가 바운드 요소에서 직접 발생할 때 핸들러가 호출되지 않고 선택자와 일치하는 하위 항목 (내부 요소)에 대해서만 호출됩니다. jQuery는 이벤트 대상에서 핸들러가 연결된 요소 (즉, 가장 안쪽에서 가장 바깥 쪽 요소)까지 이벤트를 버블 링하고 해당 경로를 따라 선택기와 일치하는 요소에 대해 핸들러를 실행합니다.

“요소에 대한 핸들러를 실행”한다는 것은 무엇을 의미합니까? 개념을 실험하기 위해 테스트 페이지 를 만들었습니다 . 그러나 다음 두 가지 구성 모두 동일한 동작을 유발합니다.

$("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 (직접) :

$("div#target span.green").on("click", function() {...});

== 야! div # target 내의 모든 span.green을 청취하기를 원합니다. 클릭하면 X를 수행하십시오.

사례 2 (위임) :

$("div#target").on("click", "span.green", function() {...});

== 안녕하세요, div # target! “span.green”인 하위 요소를 클릭하면 X를 사용하십시오.

다시 말해…

사례 1의 경우, 각 범위에 개별적으로 지침이 제공되었습니다. 새로운 스팬이 생성되면 지침을 듣지 못하고 클릭에 응답하지 않습니다. 각 범위는 직접 책임 자체 이벤트를 합니다.

사례 2에서는 컨테이너에만 지시가 주어졌다. 하위 요소 를 대신하여 클릭을 감지해야합니다 . 이벤트 잡기 작업이 위임 되었습니다 . 이것은 또한 미래에 생성되는 하위 요소에 대해 지시가 수행 될 것임을 의미합니다.

답변

첫 번째 방법은 $("div#target span.green").on() 은 클릭 핸들러를 코드가 실행되는 순간 선택기와 일치하는 범위에 직접 바인딩합니다. 이것은 다른 범위가 나중에 추가되거나 클래스가 일치하도록 변경되면 누락되고 클릭 처리기가 없다는 것을 의미합니다. 또한 나중에 클릭 핸들러가 계속 실행되는 범위 중 하나에서 “녹색”클래스를 제거하면 jQuery는 핸들러가 할당 된 방식을 추적하지 않고 선택기가 여전히 일치하는지 확인합니다.

두 번째 방법 $("div#target").on()은 클릭 핸들러를 일치하는 div에 다시 바인딩합니다 (다시 말하면이 시점에서 일치하는 것들에 대한 것임). 클릭이 div에서 발생하면 핸들러 함수는 클릭이 발생한 경우에만 실행됩니다 div뿐만 아니라 두 번째 매개 변수의 선택기와 .on()“span.green”과 일치하는 하위 요소에서 발생했습니다 . 이러한 방식으로 완료되면 해당 하위 범위가 작성된시기는 중요하지 않습니다. 이러한 하위 범위를 클릭하면 핸들러가 계속 실행됩니다.

따라서 내용을 동적으로 추가하거나 변경하지 않는 페이지의 경우 두 방법의 차이점을 알 수 없습니다. 추가 하위 요소를 동적으로 추가하는 경우 두 번째 구문은 상위에서 한 번 수행했기 때문에 클릭 핸들러를 지정하는 것에 대해 걱정할 필요가 없음을 의미합니다.

답변

N3dst4에 대한 설명은 완벽합니다. 이를 바탕으로 모든 하위 요소가 본문 안에 있다고 가정 할 수 있으므로 다음과 같이 사용해야합니다.

$('body').on('click', '.element', function(){
    alert('It works!')
});

직접 또는 위임 이벤트와 함께 작동합니다.

답변

OP와 접할 수 있지만이 기능과 혼동을 풀기위한 개념 은 바운드 요소가 선택된 요소의 부모 여야한다는 것 입니다.

  • 바운드는 왼쪽의 내용을 나타냅니다 .on .
  • 선택은의 두 번째 인수를 나타냅니다 .on().

바인딩은 바인딩 된 요소의 하위 집합을 선택하는 .find ()처럼 작동하지 않습니다. 선택기는 엄격한 자식 요소에만 적용됩니다.

$("span.green").on("click", ...

~와는 매우 다릅니다

$("span").on("click", ".green", ...

특히, “나중에 생성되는 요소들”에 대한 @ N3dst4 힌트의 이점을 얻으려면 바운드 요소는 영구적 인 부모 여야합니다 . 그런 다음 선택된 아이들이왔다 갔다 할 수 있습니다.

편집하다

위임 .on이 작동하지 않는 이유 점검 목록

$('.bound').on('event', '.selected', some_function)작동하지 않는 까다로운 이유 :

  1. 바운드 요소는 영구적 이지 않습니다 . 전화 후 만들어졌습니다.on()
  2. 선택된 요소는 바인딩 된 요소 의 올바른 자식 이 아닙니다 . 같은 요소입니다.
  3. 선택된 요소 는을 (를) 호출하여 바운드 요소에 대한 이벤트 버블 링 을 방지 했습니다 .stopPropagation().

(맞춤법이 틀린 셀렉터와 같이 까다로운 이유는 생략합니다.)

답변

직접 행사를 비교하고 위임 한 게시물을 작성했습니다. 순수한 js를 비교하지만 jquery와 동일한 의미를 가지며 캡슐화합니다.

결론은 위임 된 이벤트 처리는 사용자가 페이지와 상호 작용하는 동안 바인드 된 요소를 만들 수있는 동적 DOM 구조에 대한 것이며 (구조가 변경되지 않음을 알 때 정적 DOM 요소에 대한 직접 이벤트 처리)입니다.

자세한 정보 및 전체 비교-http:
//maciejsikora.com/standard-events-vs-event-delegation/

항상 최신 유행 인 위임 된 처리기를 사용하는 것은 올바른 방법이 아니며 많은 프로그래머가 “사용해야”하기 때문에이를 사용하지만 실제로는 직접 이벤트 처리기가 어떤 상황에서는 더 좋으며 방법 사용을 지원해야하는 선택이 더 좋습니다 차이점에 대한 지식으로.

답변