직접 대.위임됨 - jQuery .on()

직접 대.위임됨 - jQuery .on()

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

때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: 클릭되면 X를 수행합니다.

사례 2(위임):

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

이봐, div#target!"span.green"인 하위 요소가 클릭되면 해당 요소로 X를 수행합니다.

다른 말로...

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

사례 2의 경우, 컨테이너에만 지침이 주어졌습니다. 컨테이너는 하위 요소를 대신하여 클릭을 확인하는 역할을 합니다.이벤트를 잡는 작업이 위임되었습니다.이는 향후 생성되는 하위 요소에 대한 지침이 수행됨을 의미하기도 합니다.

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

방법, 두번째방은법방.$("div#target").on()만, 할 때 두 됩니다. 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().

(잘못 입력된 선택기와 같은 덜 까다로운 이유 생략)

저는 직접적인 사건들을 비교하여 게시물을 작성하고 위임했습니다.나는 순수한 j를 비교하지만 그것은 그것을 캡슐화하는 jquery와 같은 의미입니다.

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

자세한 정보 및 전체 비교는 http://maciejsikora.com/standard-events-vs-event-delegation/ 에서 확인할 수 있습니다.

항상 위임된 처리기를 사용하는 것은, 현재 매우 유행하고 있는, 올바른 방법이 아닙니다. 많은 프로그래머들이 "사용되어야 한다"는 이유로 사용하지만, 진실은 직접적인 이벤트 처리기가 어떤 상황에서 더 낫고 어떤 방법을 사용할지는 차이에 대한 지식으로 뒷받침되어야 한다는 것입니다.

사례 3(위임):

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

언급URL : https://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on