[JQUERY] 직접 대 위임 -의 jQuery CSTE 연구진은 ()

직접 대 위임 -의 jQuery CSTE 연구진은 ()

해결법

1. ---

   1.사례 1 (직접) :

   사례 1 (직접) :

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

   == 이봐! 나는 최대 듣고 DIV # 대상 내부의 모든 span.green를 원하는 : 당신이 클릭받을 때, X를 할

   사례 2 (위임) :

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

   == 이봐, DIV 번호 목표! "span.green"하는 당신의 자식 요소 중 하나가, 클릭하면, 그들과 함께 X을한다.

   다시 말해...

   케이스 (1)에있어서, 그 지속 기간의 각각은 개별적으로 지시를 받고있다. 새로운 경간이 생성받을 경우, 그들은 지시를 들어 보지 못했을 것입니다 클릭에 응답하지 않습니다. 각 스팬은 자신의 이벤트에 대한 직접 책임이있다.

   경우 2에서, 단지 컨테이너는 지시를 주어졌다; 그것의 자식 요소를 대신하여 클릭을 몰래 책임이있다. 잡기 이벤트의 작업을 위임하고있다. 이것은 또한 명령이 미래에 생성되는 하위 요소에 대해 수행된다는 것을 의미합니다.

2. ---

   2.첫 번째 방법, $ ( "DIV # 대상 span.green").의 ()는 코드가 실행되는 순간에 셀렉터에 일치하는 스팬 (들)에 직접 클릭 핸들러를 결합한다. 다른 스팬이 (또는이 자신의 클래스가 일치하도록 변경) 나중에 추가하는 경우이 방법은 밖으로 놓친하고 클릭 처리기가 없습니다. 또한 그것은 나중에의 클릭 핸들러가 계속 실행됩니다 스팬 중 하나에서 "녹색"클래스를 제거하면 수단 - jQuery를 핸들러가 할당 된 방법을 추적하지 않고 선택은 여전히 ​​일치하는지 확인합니다.

   첫 번째 방법, $ ( "DIV # 대상 span.green").의 ()는 코드가 실행되는 순간에 셀렉터에 일치하는 스팬 (들)에 직접 클릭 핸들러를 결합한다. 다른 스팬이 (또는이 자신의 클래스가 일치하도록 변경) 나중에 추가하는 경우이 방법은 밖으로 놓친하고 클릭 처리기가 없습니다. 또한 그것은 나중에의 클릭 핸들러가 계속 실행됩니다 스팬 중 하나에서 "녹색"클래스를 제거하면 수단 - jQuery를 핸들러가 할당 된 방법을 추적하지 않고 선택은 여전히 ​​일치하는지 확인합니다.

   두 번째 방법은, $ ( "DIV # 대상").) (에이 사업부 (들) 일치하는 (다시, 이것은 그 순간과 일치하는 반대)에 클릭 핸들러를 결합,하지만 때 클릭 어딘가에 발생 클릭이 CSTE 연구진 (), "span.green"에 두 번째 매개 변수의 선택 일치 사업부에 있지만 자식 요소뿐만 아니라 발생한 경우 사업부는 핸들러의 기능은 실행됩니다. 여전히 처리기를 실행합니다 그들에게 클릭하면, 그 아이의 경간이 만들어진 때 중요하지 않습니다이 방법을 완료.

   페이지에 대한 그 동적으로 추가하거나 내용을 변경하지 않습니다 그래서 당신은 두 가지 방법 사이의 차이를 통지하지 않습니다. 동적으로 추가 하위 요소를 두 번째 구문 수단을 추가하는 경우 이미 부모에 한 번 한 적이 있기 때문에 당신은 그들에게 클릭 핸들러를 할당에 대해 걱정할 필요가 없습니다.

3. ---

   3.N3dst4의 설명은 완벽합니다. 이를 바탕으로, 우리는 그러므로 우리는 이것을 사용할 필요가 모든 자식 요소 안에 몸이라고 가정 할 수 있습니다 :

   N3dst4의 설명은 완벽합니다. 이를 바탕으로, 우리는 그러므로 우리는 이것을 사용할 필요가 모든 자식 요소 안에 몸이라고 가정 할 수 있습니다 :

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

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

4. ---

   4.영업하지만,이 기능을 사용하여 나에게 해명 혼란 도움이 개념에 대한 접선은 바운드 요소가 선택한 요소의 부모를해야한다는 것입니다.

   영업하지만,이 기능을 사용하여 나에게 해명 혼란 도움이 개념에 대한 접선은 바운드 요소가 선택한 요소의 부모를해야한다는 것입니다.

   대표단은 바운드 요소의 하위 집합을 선택 .find 같은 일을 ()하지 않습니다. 선택기는 엄격한 자식 요소에 적용됩니다.

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

   매우 다르다

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

   특히, "미래에 생성되는 요소는"바운드 요소가 영구적 인 부모해야와에서 N3dst4 힌트 @ 이점을 얻을 수 있습니다. 그런 다음 선택한 아이들이 와서 갈 수 있습니다.

   편집하다

   까다로운 가지 이유 $를 ( '이벤트', '.selected'some_function) 작동하지 않을 수 있습니다에 ( '바인딩.'). :

   (예 : 맞춤법이 틀린 선택 덜 까다로운 이유를 생략.)

5. ---

   5.내가 직접 이벤트 및 위임의 비교에 게시물을 테 WRO. 나는 순수 JS를 비교하지만 그것은 단지를 캡슐화 대한 jQuery 같은 의미를 가지고있다.

   내가 직접 이벤트 및 위임의 비교에 게시물을 테 WRO. 나는 순수 JS를 비교하지만 그것은 단지를 캡슐화 대한 jQuery 같은 의미를 가지고있다.

   결론 우리는 그 구조가 변경되지 않습니다 알고있는 경우 위임 된 이벤트 처리는, 사용자 페이지와 상호 작용 (필요 없음 다시 바인딩), 직접 이벤트 처리 정적 DOM 요소 동안 바인더 제본 요소를 생성 할 수있는 동적 DOM 구조에 대한 것입니다.

   자세한 내용과 전체 비교를 위해 - http://maciejsikora.com/standard-events-vs-event-delegation/

   내가 볼 항상 위임 처리기를 사용하면 현재 매우 트렌디를 잘 작성 방법이 아니다 "라고이 사용되어야한다"때문에 많은 프로그래머는 그것을 사용하지만, 진실은 직접 이벤트 핸들러 더 나은 몇 가지 상황 및 방법의 사용을 지원해야 선택을위한 점이다 차이의 지식에 의해.

from https://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on by cc-by-sa and MIT license