[JQUERY] jQuery를 click```bind` (예)와 live```delegate```on` trigger` 및 기능 차이?

jQuery를 click```bind` (예)와 live```delegate```on` trigger` 및 기능 차이?

해결법

1. ---

   1.당신이이 글을 읽을 전에, API 자체가 엄청난 도움이 될 것입니다, 다른 페이지에서 이벤트 목록을 끌어, 나는 아래 논의하는 것은이 페이지에서 직접 연결되어있는 무슨의 모든.

   당신이이 글을 읽을 전에, API 자체가 엄청난 도움이 될 것입니다, 다른 페이지에서 이벤트 목록을 끌어, 나는 아래 논의하는 것은이 페이지에서 직접 연결되어있는 무슨의 모든.

   먼저, .click (기능) ( '클릭'기능) 그대로 .bind에 대한 바로 가기, 그들은 동일합니다. 이 같은 요소에 직접 핸들러를 바인딩 할 때이를 사용 :

   $(document).click(function() {
     alert("You clicked somewhere in the page, it bubbled to document");
   });
   

   이 요소가 교체 또는 폐기 도착하면,이 핸들러는 더 이상 없을 것입니다. 또한 거기이 코드가 핸들러를 첨부 실행할 때 있었다 요소는 핸들러를받지 않습니다 (예를 들어, 선택은 그것을 발견).

   .live ()와 .delegate ()가 유사 관련, .delegate ()가 실제로 .live ()를 사용 내부적으로, 둘 다 거품에 이벤트를 수신. 이것은 신규 및 기존 요소를, 거품 이벤트 같은 방식으로 작동합니다. 당신의 요소가 변경 될 때, 예를 들어, 다음을 사용 이 페이지에 체류하고있는 시점에서 교체 할 수 없습니다 부모 / 공통 조상을 같이 () .live 사용하지 않는 경우 등 새로운 행, 목록 항목을 추가 :

   $(".clickAlert").live('click', function() {
     alert("A click happened");
   });
   

   당신이 (그것의 이벤트 핸들러 안녕히하지 않을 수 있도록) 교체지고 있지 않은 부모 요소 곳이 있나요 그러나 경우이 같은 .delegate ()로 처리해야합니다 :

   $("#commonParent").delegate('.clickAlert', 'click', function() {
     alert("A click happened, it was captured at #commonParent and this alert ran");
   });
   

   이것은) (.live와 거의 동일하게 작동하지만 이벤트가 캡처 핸들러가 실행되기 전에 더 적은 시간을 거품. 이 두 가지의 또 다른 일반적인 사용은 일치하는 경우 클래스는, 셀렉터 이벤트의 시간에 평가되는 이러한 방법으로 ... 더 이상 원래 사용 선택 일치하는 요소에 핸들러 실행을 변경하지 말 것입니다 .. .so를 요소가 더 이상 선택 사항과 일치, 그것은 더 이상 실행되지 않습니다. .click으로 ()하지만, 이벤트 처리기가 DOM 요소에 바인딩 된 권리이며, 그것을 찾는 데 사용 된 어떤 선택 일치하지 않는다는 사실은 ... 무관 이벤트가 바인딩하고 해당 요소가 없어 때까지 머물고 또는 처리기 .unbind 통해 제거된다 ().

   그러나 .live ()와 .delegate 또 다른 일반적인 사용은 () 성능이다. 각 요소에 직접 클릭 핸들러를 부착, 요소를 많이 취급하는 경우하는 것은 비용과 시간이 소요됩니다. 이러한 경우에는이 설정 한 핸들러를 더 경제적이고, 일을이 큰 차이를 만들어이 문제를 살펴 버블 링하자, 어플리케이션의 좋은 예입니다.

   트리거 - 업데이트 된 질문에 대한

   가능 2 메인 이벤트 핸들러 트리거 기능이있다, 그들은 API에서 동일한 "이벤트 핸들러 첨부 파일"범주에 속하는, 이러한 .trigger ()와 .triggerHandler ()입니다. .trigger ( 'EVENTNAME')는 일부 바로 가기를 내장 예를 들어 일반적인 이벤트에 대해이있다 :

   $().click(fn); //binds an event handler to the click event
   $().click();   //fires all click event handlers for this element, in order bound
   

   현재이 바로 가기를 포함하는 목록을 볼 수 있습니다.

   차이에 관해서는, .trigger ()는 (예를 들어, 클릭 된 <텍스트 영역>의 정확한 지점에 커서를 배치, 대부분의 시간이 아닌 기본 동작) 이벤트 핸들러를 트리거합니다. 그것은 (기본 이벤트와 마찬가지로), 네이티브 이벤트 동작을 발사 그들이 결합 된 순서에 발생하는 이벤트 핸들러를 유발하고, DOM을 거품.

   .triggerHandler ()는 화재, 예를 들어,에 네이티브 이벤트가 발생하지 않습니다, 여기 당신은 단지 바운드 핸들러 (들)을 발사하려는 다른 목적을 위해 일반적으로 양식을 제출. 그것은 DOM까지없는 거품을한다, 그리고 (해당 이벤트가 반환을 위해 반환에 상관없이 마지막 바운드 이벤트 핸들러) 체인 방식이 아니다. 당신은 포커스 이벤트를 트리거하고 싶었지만 실제로 객체를 집중하지 예를 들어, 당신은 당신이 실행하는 .focus (FN)와 결합 된 코드를 원하는,이, 그렇게 할 것 .trigger 반면, () 할 것이라고 아니라 실제로 초점으로 소자 거품입니다.

   다음은 실제 예입니다 :

   $("form").submit(); //actually calling `.trigger('submit');`
   

   이것은 어떤 예를 들어, 핸들러를 제출 실행할 것 jQuery를 검증 플러그인, 다음 <형식>을 제출하려고합니다. 그것이 제출 이벤트 핸들러를 통해 매여 있지만, <양식> 제출하지 이후 당신은 그냥 확인하려면 싶어하지만 경우에 나중에, 당신은 다음과 같이 ( '제출') .triggerHandler을 사용할 수 있습니다 :

   $("form").triggerHandler('submit');
   

   플러그인은 유효성 검사를 통과하지 않을 경우 밖으로 폭격에 의해 양식을 제출에서 핸들러를 방지 할 수 있지만이 방법으로 우리는 무엇을 걱정하지 않는다. 그것이 중단 여부를 우리가 양식을 제출하려고하지하든, 우리는 단지 재 검증에 트리거하고 다른 아무것도하지 싶었다. (면책 조항 : 플러그인에 .validate () 메소드가 이후 이것은 불필요한 예이지만, 의도 괜찮은 그림입니다)

2. ---

   2.처음 두 동등하다.

   처음 두 동등하다.

   // The following two statements do the same thing:
   $("blah").click( function() { alert( "Click!" ); } );
   $("blah").bind( "click", function() { alert( "Click!" ); } ); 
   

   두 번째는, 비록 여러 개의 공간 분리 된 이벤트 명을 지정하여, 동시에 하나 개 이상의 이벤트에 바인딩 할 수있다 :

   $("blah").bind( "click mouseover mouseout", function() { alert( "Click! Or maybe mouse moved." ); } ); 
   

   .live 방법은 더 흥미 롭다. 다음 예를 살펴 보겠습니다 :

   <a class="myLink">A link!</a>
   <a id="another">Another link!</a>
   
   <script>
       $("a.myLink").click( function() { alert( 'Click!' ); } );
   
       $("a#another").addClass( "myLink" );
   </script>
   

   스크립트가 실행의 두 번째 줄 이후, 두 번째 링크는 또한 "내 링크"의 CSS 클래스가됩니다. 이벤트가 부착되었을 때이 클래스를 가지고 있지 않았기 때문에 그러나, 이벤트 핸들러가되지 않습니다.

   이제 당신이 다른 방법으로 주위가되고 싶었 고려 : 클래스 "내 링크"와 링크 페이지에 어딘가에 나타납니다 때마다, 당신은 자동으로 동일한 이벤트 핸들러를 갖고 싶어. 당신이 동적으로 행 또는 셀을 추가 목록 또는 테이블의 몇 가지 종류가 있지만 모두 같은 방식으로 행동 할 때 매우 일반적입니다. 대신 모든 새롭게마다 이벤트 핸들러를 할당하는 고통을가는, 당신은 .live 방법을 사용할 수 있습니다 :

   <a class="myLink">A link!</a>
   <a id="another">Another link!</a>
   
   <script>
       $("a.myLink").live( "click", function() { alert( 'Click!' ); } );
   
       $("a#another").addClass( "myLink" );
   </script>
   

   이 예에서, 두 번째 링크는 또한이 "내 링크"클래스를 가져옵니다 자마자 이벤트 핸들러를 얻을 것이다. 마법! :-)

   물론, 그 문자 아니다. 무엇 진짜로 .live하면 지정된 요소 자체를하지 핸들러를 첨부하지만 HTML 트리 (이하 "body"원소)의 매우 루트. DHTML 이벤트 "가 버블 링"의 재미있는 기능이 있습니다. 이걸 고려하세요:

   <div> <a> <b>text</b> </a> </div>
   

   당신이 "텍스트"를 클릭하면, 먼저의 요소는 "클릭"이벤트를 얻을 것이다. 그 후, 요소는 "클릭"이벤트를 얻을 것이다. 그리고

   요소는 "클릭"이벤트를 얻을 것이다 그 후. 등등 -의 요소에 모든 방법까지. 그리고 jQuery를가 이벤트를 잡아 처음에 이벤트를 발생시킨 요소에 적용되는 "라이브"핸들러가 있는지 확인할 것의 그. 산뜻한!

   그리고 마지막으로, .delegate 방법. 그것은 단순히 주어진 모든 선택을 준수하고 그들에게 "라이브"핸들러를 첨부하여 요소의 어린이합니다. 구경하다:

   $("table").delegate( "td", "click", function() { alert( "Click!" ); } );
   
   // Is equivalent to:
   $("table").each( function() {
       $(this).find( "td" ).live( "click", function() { alert( "Click!" ); } );
   } );
   

   질문이 있으십니까?

3. ---

   3.jQuery를 1.7으로, .live () 메소드는 추천 하였다. 공식적으로 사용하는 것이 좋습니다보다 당신이 jQuery를 버전 <1.7을 사용하는 경우 .delegate () 이상 .live ().

   jQuery를 1.7으로, .live () 메소드는 추천 하였다. 공식적으로 사용하는 것이 좋습니다보다 당신이 jQuery를 버전 <1.7을 사용하는 경우 .delegate () 이상 .live ().

   .live ()가 () CSTE 연구진로 대체하고있다.

   베스트 자세한 내용은 jQuery를 사이트로 직접 이동하지만, 여기에 () 메소드 CSTE 연구진의 현재 버전입니다합니다 :

   .on( events [, selector] [, data], handler(eventObject) )
   .on( events-map [, selector] [, data] )
   

   http://api.jquery.com/on/

4. ---

   4.. $ ()을 클릭 (FN)와 $ () 바인드를 첫눈에 동일하지만, $ .bind 버전은 두 가지 이유 때문에 더 강력 (FN은 '클릭'). :

   . $ ()을 클릭 (FN)와 $ () 바인드를 첫눈에 동일하지만, $ .bind 버전은 두 가지 이유 때문에 더 강력 (FN은 '클릭'). :

   대표 VS 라이브 :이 이미 다른 답변에 대답하고있다.

5. ---

   5.이 API의 힘의 도움을 읽는 곳이다. 그러나, 나는 당신이 게으름 계속할 수 있도록, 내 머리의 상단을 알고 (야호!).

   이 API의 힘의 도움을 읽는 곳이다. 그러나, 나는 당신이 게으름 계속할 수 있도록, 내 머리의 상단을 알고 (야호!).

   $('#something').click(fn);
   $('#something').bind('click',fn);
   

   여기에는 차이가 (내가 아는) 없습니다. .bind의 편의를 위해 / 도우미 방법은 간단 .click입니다 ( '클릭'

   // even after this is called, all <a>s in
   // <div class="dynamic_els"> will continue
   // to be assigned these event handlers
   
   $('div.dynamic_els a').live(‘click’,fn);
   

   .live 당신이 (당신이 여기 없어 가지고있는)에 전달하는 선택에 이벤트를 추가하고 노드가 삽입됨에 따라 DOM을보고 계속이 매우 다르다 / 제거

   $('#some_element').delegate('td','click',fn);
   

   이는 당신이 이벤트 핸들러를 할당하는 방식 만 다르다. .delegate는 DOM 이벤트 버블 링을 중심으로. 기본 원리는 루트 요소 (문서 또는 창 또는 또는 <몸>, 내가 정확히 기억이 안나요)에 도달 할 때까지 모든 이벤트는 DOM 트리를 통해 위쪽으로 거품이다.

   어느 쪽이든, 당신은에 온 클릭 핸들러를 바인딩하고 모든 의 $ ( '#의 some_element') (당신이 $ (문서)를 말할 수 있지만 당신은 선택기를 지정해야합니다) 내에서. 그 아이 중 하나를 클릭하면 이벤트는 까지 거품. 그런 다음 이벤트 (jQuery를이 자동적으로 당신을 위해 수행하는)의 소스 요소를 추출 할 수 있습니다.

   이 요소의 톤이며, 당신은 단지 몇 (또는 하나의 중앙) 지점 이러한 이벤트를 통해 갈 것이다 [S]가있을 때 유용합니다. 이것은 적은 개체로이 이벤트 핸들러를 통합하는 브라우저 노력과 메모리를 절약 할 수 있습니다.

from https://stackoverflow.com/questions/2954932/difference-between-jquery-click-bind-live-delegate-trigger-and-on by cc-by-sa and MIT license