직접 대 위임-jQuery .on ()

직접 대 위임-jQuery .on ()

---

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().

(맞춤법이 틀린 셀렉터와 같이 까다로운 이유를 생략 함)

---

I wro te a post with a comparison of direct events and delegated. I compare pure js but it has the same meaning for jquery which only encapsulate it.

Conclusion is that delegated event handling is for dynamic DOM structure where binded elements can be created while user interact with page ( no need again bindings ), and direct event handling is for static DOM elements, when we know that structure will not change.

For more information and full comparison - http://maciejsikora.com/standard-events-vs-event-delegation/

Using always delegated handlers, which I see is current very trendy is not right way, many programmers use it because "it should be used", but truth is that direct event handlers are better for some situation and the choice which method use should be supported by knowledge of differences.

참고URL : https://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on