jQuery 'click', 'bind', 'live', 'delegate', 'trigger', 'on' 기능(예시)의 차이는 무엇입니까?

jQuery 'click', 'bind', 'live', 'delegate', 'trigger', 'on' 기능(예시)의 차이는 무엇입니까?

의 각 기능에 대한 설명서를 읽었지만 아래 기능 간의 비교 목록은 없습니다.

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

참조 링크를 사용하지 마십시오.

위의 모든 기능이 정확히 어떻게 작동하며 어떤 상황에서 선호되어야 합니까?

참고: 동일한 기능이나 메커니즘을 가진 다른 기능이 있다면 자세히 설명해 주십시오.

갱신하다

나는 또한 본 적이 있습니다.$.trigger기능 합니까?위의 기능과 비슷하게 작동합니까?

추가 업데이트

v1.7에 추가되었으며, 위의 모든 기능 요구사항을 어느 정도 충족한다고 생각합니다.

이것을 읽기 전에 이 이벤트 목록을 다른 페이지로 끌어올리십시오. API 자체가 매우 유용하며, 아래에서 제가 논의하고 있는 모든 내용이 이 페이지에서 직접 연결되어 있습니다.

첫째, 는 문자 그대로 의 바로 가기입니다. 그들은 동등합니다.다음과 같이 핸들러를 요소에 직접 바인딩할 때 사용합니다.

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

이 요소가 교체되거나 버려지면 이 처리기는 더 이상 존재하지 않습니다.또한 이 코드를 실행하여 핸들러를 연결할 때 없었던 요소(예: 선택기가 그 때 발견한 것)는 핸들러를 가져오지 못합니다.

.live() 그리고 유사하게 연관되어 있고, 실제로 내부적으로 사용되며, 둘 다 거품이 발생하는 사건을 듣습니다.이것은 새로운 요소와 오래된 요소에 대해 작동합니다. 그들은 같은 방식으로 사건을 버블링합니다.요소가 변경될 수 있는 경우(예: 새 행, 목록 항목 추가 등) 사용합니다.페이지에 남아 있고 어느 시점에서도 교체되지 않을 상위/공통 상위가 없는 경우 다음과 같이 사용합니다.

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

그러나 교체되지 않는 상위 요소가 있는 경우(따라서 이벤트 핸들러가 바이바이되지 않음) 다음과 같이 처리해야 합니다.

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

이 작업은 와 거의 동일하게 작동하지만 이벤트 버블이 캡처되고 처리기가 실행되기 전에 더 적게 발생합니다.이 두 가지를 모두 사용하는 또 다른 일반적인 방법은 요소에서 클래스가 변경되어 원래 사용한 선택기와 더 이상 일치하지 않는 경우입니다.이러한 방법을 사용하여 이벤트 시 셀렉터를 평가합니다. 일치하는 경우 핸들러가 실행됩니다.따라서 요소가 더 이상 선택기와 일치하지 않고 더 이상 실행되지 않습니다.하지만 이벤트 핸들러가 DOM 요소에 바로 바인딩되어 있기 때문에 이벤트 핸들러를 찾는 데 사용된 선택기와 일치하지 않는다는 사실은 관련이 없습니다.이벤트가 바인딩되고 해당 요소가 사라지거나 를 통해 핸들러가 제거될 때까지 이벤트가 유지됩니다.

및 의 또 다른 일반적인 용도는 성능입니다.많은 요소를 다루는 경우 각 요소에 직접 클릭 핸들러를 연결하는 것은 비용과 시간이 많이 듭니다.이러한 경우에는 단일 핸들러를 설정하고 버블링이 작업을 수행하도록 하는 것이 더 경제적입니다. 이 질문이 큰 차이를 일으켰습니다. 응용 프로그램의 좋은 예입니다.

---

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

사용할 수 있는 두 가지 주요 이벤트 핸들러 트리거링 기능은 API의 동일한 "이벤트 핸들러 첨부" 범주에 속합니다. 이들은 및 .에 공통 이벤트에 대한 몇 가지 바로 가기가 내장되어 있습니다. 예:

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

여기에서 바로 가기를 포함한 목록을 볼 수 있습니다.

차이의 경우 이벤트 핸들러를 트리거합니다(대부분의 경우 기본 동작은 아님). 예를 들어 클릭한 위치의 오른쪽에 커서를 배치합니다.<textarea> 핸들러를 이벤트와 로) 동작을 DOM을 이벤트 핸들러가 바인딩된 순서대로(네이티브 이벤트와 마찬가지로) 발생하고 네이티브 이벤트 작업을 실행하며 DOM을 버블업합니다.

.triggerHandler() 일반적으로 다른 용도로 사용됩니다. 여기서는 바인딩된 처리기를 해고하려고 할 뿐이며, 양식 제출과 같이 네이티브 이벤트가 발생하지 않습니다.DOM을 버블링하지 않으며 체인화할 수 없습니다(해당 이벤트에 대한 마지막 바인딩된 이벤트 핸들러가 반환하는 것은 무엇이든 반환합니다).예를 들어 트리거하려는 경우focus이벤트는 실제로 객체에 초점을 맞추지 않습니다. 바인딩된 코드를 실행하기를 원할 뿐입니다. 이렇게 하면 실제로 요소에 초점을 맞추고 거품이 일 수 있습니다.

다음은 실제 사례입니다.

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

이렇게 하면 jQuery 유효성 검사 플러그인과 같은 제출 핸들러를 실행한 다음,<form>하지만 만약 당신이 단지 유효성을 확인하고 싶다면, 왜냐하면 그것은 a를 통해 연결되어 있기 때문입니다.submit 핸들러,, 이벤트 핸들러<form>나중에 다음과 같이 사용할 수 있습니다.

$("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 트리의 루트("본체" 요소)에 핸들러를 연결합니다.DHTML의 사건들은 "거품이 일다"라는 재미있는 특징을 가지고 있습니다.고려 사항:

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

"텍스트"를 클릭하면 먼저 <b> 요소에 "클릭" 이벤트가 표시됩니다.그런 다음 <a> 요소에 "클릭" 이벤트가 발생합니다.그런 다음 <div> 요소는 "클릭" 이벤트를 받게 됩니다.그 외에도, <몸> 요소에 이르기까지.여기서 jQuery는 이벤트를 포착하여 이벤트를 유발한 요소에 적용되는 "활성" 핸들러가 있는지 확인합니다.깔끔해요!

그고마지로으막리,로▁and으,.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()에서는 네임스페이스 이벤트를 지원합니다. 요소가 바인딩된 특정 이벤트 핸들러만 제거(바인딩 해제)하려는 경우 강력한 기능으로 네임스페이스 이벤트에서 더 많이 읽습니다.

Live vs Delegate: 다른 응답에서 이미 응답했습니다.

이것이 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때.

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

이는 이벤트 핸들러를 할당하는 방식 때문에 다를 뿐입니다..delegateDOM 이벤트 버블링을 중심으로 합니다.는 모든 요소에 이 발생하는 입니다.document또는window또는<html>또는<body>정확히 기억이 안 나요)

어느 쪽이든, 당신은 구속력이 있습니다.onclick 든것을다사람의 <td> 내의 s$('#some_element')(비록 당신이 말할 수 있지만, 당신은 선택기를 지정해야 합니다.$(document)) 중 ( )로 <td>그런 다음 이벤트의 원본 요소를 추출할 수 있습니다(jQuery가 자동으로 수행함).

이 기능은 요소가 많고 이러한 이벤트가 통과하는 몇 개의(또는 하나의 중심점)만 있는 경우에 유용합니다.이렇게 하면 이러한 이벤트 핸들러를 더 적은 개체로 통합하기 위한 브라우저의 노력과 메모리가 절약됩니다.

언급URL : https://stackoverflow.com/questions/2954932/difference-between-jquery-click-bind-live-delegate-trigger-and-on