[javascript] jQuery`click`,`bind`,`live`,`delegate`,`trigger` 및`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." ); } ); 

<a class="myLink">A link!</a>
<a id="another">Another link!</a>

<script>
    $("a.myLink").click( function() { alert( 'Click!' ); } );

    $("a#another").addClass( "myLink" );
</script>

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

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

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

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

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

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

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

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