jQuery`click`,`bind`,`live`,`delegate`,`trigger` 및`on` 함수의 차이점은 무엇입니까?

에 대한 각 함수의 설명서를 읽었 jQuery official website지만 아래 함수 사이에는 비교 목록이 없습니다.

$().click(fn)
$().bind('click',fn)
$().live('click',fn)
$().delegate(selector, 'click', fn)
$().trigger('click') // UPDATED
$().on('click', selector ,fn); // more UPDATED

참조 링크를 피하십시오.

위의 모든 기능은 어떻게 작동하며 어떤 상황에서 어떤 기능을 선호해야합니까?

참고 : 동일한 기능 또는 메커니즘을 가진 다른 기능이있는 경우 자세히 설명하십시오.

최신 정보

나는 또한 $.trigger기능을 보았다 . 위의 기능과 유사하게 작동합니까?

추가 업데이트

이제 v1.7에.on 추가 되었으며이 기능이 위의 모든 기능 요구 사항을 함께 다루고 있다고 생각합니다.

이 페이지 를 읽기 전에 다른 페이지에서이 이벤트 목록을 가져 오면 API 자체가 매우 유용하며 아래에서 논의하는 모든 내용이이 페이지에서 직접 연결됩니다 .

먼저 .click(function)말 그대로 바로 가기입니다 .bind('click', function). 다음 과 같이 핸들러 를 요소에 직접 바인딩 할 때 사용하십시오 .

$(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()하지만 캡처 및 처리기가 실행되기 전에 이벤트 버블 링 횟수가 줄어 듭니다. 둘 다의 또 다른 일반적인 용도는 요소에서 클래스가 변경되어 더 이상 원래 사용한 선택기와 더 이상 일치하지 않는다는 것입니다. 이러한 메소드를 사용 하면 이벤트가 발생할 때 선택기가 평가 되고 핸들러가 실행되면 처리기가 실행됩니다. . 따라서 요소가 더 이상 선택기와 일치하지 않아 더 이상 실행되지 않습니다. 와.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() 대해서는 이벤트 핸들러를 트리거합니다 (그러나 대부분의 경우 기본 조치는 <textarea>아님). 이벤트 핸들러가 바인드 된 순서대로 (기본 이벤트의 순서대로) 발생하고 기본 이벤트 조치를 실행하며 DOM을 버블 링합니다.

.triggerHandler()일반적으로 다른 목적으로 사용됩니다. 여기서는 바인딩 된 핸들러를 실행하려고합니다. 예를 들어 양식 제출과 같은 기본 이벤트가 실행되지 않습니다. DOM을 버블 링하지 않으며 체인화 할 수 없습니다 (해당 이벤트에 대한 마지막 바인딩 이벤트 핸들러가 반환하는 것을 반환합니다). 예를 들어focus 이벤트 싶지만 실제로 객체에 초점을 맞추고 싶지 않다면 바인딩하려는 코드 .focus(fn)를 실행 하고 싶을 .trigger()것입니다.

실제 예는 다음과 같습니다.

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

jQuery 유효성 검사 플러그인 과 같은 제출 핸들러를 실행 한 다음을 제출하려고합니다 <form>. 그러나 만약 당신 이 그것이를 통해 엮은 이후, 확인하려면 원하는 submit이벤트 핸들러하지만를 제출하지 <form>이후에, 당신은 사용할 수 있습니다 .triggerHandler('submit')다음과 같이 :

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

플러그인은 유효성 검사가 통과되지 않으면 처리기가 양식을 제출하지 못하게하지만이 방법을 사용하면 처리 방식에 신경 쓰지 않습니다. 양식 이 중단되었는지 여부에 관계없이 양식을 제출 하지 않으려 는 경우 양식을 다시 확인하고 다른 작업을 수행 하지 않으려 고 했습니다. ( 면책 조항 : 이것은 불필요한 예입니다..validate() 플러그인에 메소드가 이지만 의도를 잘 보여줍니다.)

처음 두 가지는 동일합니다.

// 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>

스크립트의 두 번째 줄이 실행 된 후 두 번째 링크에는 "myLink"의 CSS 클래스도 있습니다. 그러나 이벤트가 연결될 때 클래스가 없었기 때문에 이벤트 핸들러가 없습니다.

"myLink"클래스가있는 링크가 페이지의 어딘가에 나타날 때마다 동일한 이벤트 핸들러를 자동으로 갖기를 원합니다. 이것은 행이나 셀을 동적으로 추가하지만 모두 같은 방식으로 동작하기를 원하는 일종의 목록이나 테이블이있을 때 매우 일반적입니다. 매번 새로 이벤트 핸들러를 할당해야하는 번거 로움 대신에 다음 .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>

이 예제에서 두 번째 링크는 "myLink"클래스를 가져 오면 이벤트 핸들러를 가져옵니다. 마법! :-)

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

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

"text"를 클릭하면 먼저 <b> 요소에 "click"이벤트가 발생합니다. 그 후 <a> 요소는 "click"이벤트를받습니다. 그리고 나서 <div> 요소는 "click"이벤트를받습니다. 그리고 <body> 요소까지 계속됩니다. 그리고 여기서 jQuery는 이벤트를 잡아서 이벤트를 발생시킨 요소에 적용되는 "라이브"핸들러가 있는지 확인합니다. 산뜻한!

그리고 마지막으로 .delegate방법입니다. 주어진 선택자를 따르는 요소의 모든 자식을 가져 와서 "실시간"처리기를 연결합니다. 구경하다:

$("table").delegate( "td", "click", function() { alert( "Click!" ); } );

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

질문이 있으십니까?

jQuery 1.7부터 .live () 메소드는 더 이상 사용되지 않습니다. jQuery 버전 <1.7을 사용하는 경우 공식적으로 .live () 대신 .delegate ()를 사용하는 것이 좋습니다.

.live ()는 이제 .on ()으로 대체되었습니다.

자세한 내용은 jQuery 사이트로 직접 이동하는 것이 가장 좋지만 .on () 메서드의 현재 버전은 다음과 같습니다.

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

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

$().click(fn)그리고 $().bind('click', fn)첫눈에 동일하지만 $.bind버전은 두 가지 이유 더 강력 :

1. $().bind()예를 들어 하나의 핸들러를 여러 이벤트에 할당 할 수 있습니다 $().bind('click keyup', fn).
2. $().bind() 네임 스페이스 이벤트를 지원합니다-요소가 바인딩 된 특정 이벤트 핸들러 만 제거 (바인드 해제)하려는 경우 강력한 기능-자세히 알아보기 네임 스페이스 이벤트 .

실시간 대의원 : 이것은 다른 답변에서 이미 답변되었습니다.

API를 읽는 것이 도움이 될 수 있습니다. 그러나 나는 내 머리 꼭대기를 알고 있으므로 계속 게으르게 될 수 있습니다 (예!).

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

여기에는 차이가 없습니다 (내가 아는 것). .click단순히 편의 / 도우미 방법입니다.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);

이것은 이벤트 핸들러를 할당하는 방식 때문에 다릅니다. .delegateDOM 이벤트 버블 링을 중심으로합니다. 기본 원칙은 모든 이벤트가 루트 요소에 도달 할 때까지 DOM 트리를 통해 위로 버블 링하는 것입니다 ( document또는 windowor <html>또는 <body>정확히 기억할 수 없음).

어느 쪽이든, 당신은 바인딩하고 onclick모두에 핸들러 <td>내에서의 $('#some_element')(당신이 말할 수 있지만 당신은 선택기를 지정해야합니다 $(document)). 자식 중 하나를 클릭하면 이벤트가<td> 됩니다. 그런 다음 이벤트의 소스 요소를 추출 할 수 있습니다 (jQuery가 자동으로 수행함).

이것은 많은 요소가있을 때 유용하며 이러한 이벤트가 진행할 몇 가지 (또는 하나의 중앙) 포인트 만 있습니다. 이렇게하면 이러한 이벤트 처리기를보다 적은 수의 개체로 통합하기위한 브라우저 노력과 메모리가 절약됩니다.