복붙노트

[JQUERY] `on`와`live` 또는`bind`의 차이점은 무엇입니까?

JQUERY

`on`와`live` 또는`bind`의 차이점은 무엇입니까?

해결법

  1. 1.()에하는 일에 jQuery의 이벤트 바인딩 대부분의 기능을 통합하는 시도이다. 이 대표 VS 라이브와 비 효율성을 정리를 추가로 제공합니다. jQuery를 향후 버전에서는 이러한 방법을 제거하고 만에 하나는 남아있을 것입니다 될 것입니다.

    ()에하는 일에 jQuery의 이벤트 바인딩 대부분의 기능을 통합하는 시도이다. 이 대표 VS 라이브와 비 효율성을 정리를 추가로 제공합니다. jQuery를 향후 버전에서는 이러한 방법을 제거하고 만에 하나는 남아있을 것입니다 될 것입니다.

    예를 들면 :

    // Using live()
$(".mySelector").live("click", fn);

// Equivalent `on` (there isn't an exact equivalent, but with good reason)
$(document).on("click", ".mySelector", fn);

    // Using bind()
$(".mySelector").bind("click", fn);

// Equivalent `on`
$(".mySelector").on("click", fn);

    // Using delegate()
$(document.body).delegate(".mySelector", "click", fn);

// Equivalent `on`
$(document.body).on("click", ".mySelector", fn);

    내부적으로, jQuery를 추가로 당신은 지금부터 이러한 방법을 무시하고 단지에서 사용하는 것을 나타냅니다 () 메소드에 모든 방법과 속기 이벤트 핸들러 세터를 매핑 :

    bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},

    https://github.com/jquery/jquery/blob/1.7/src/event.js#L965를 참조하십시오.

  2. 2.에 매우 가까운 위임하는 자연입니다. 그래서 왜 안 대리자를 사용할 수 있습니까? 혼자 오지 않는다에 때문입니다. 이 바인딩을 해제 이벤트, 꺼져 하나는 이벤트가 한 번 만 실행되도록 만들 수 있습니다. 이것은 새로운 이벤트의 "패키지"입니다.

    에 매우 가까운 위임하는 자연입니다. 그래서 왜 안 대리자를 사용할 수 있습니까? 혼자 오지 않는다에 때문입니다. 이 바인딩을 해제 이벤트, 꺼져 하나는 이벤트가 한 번 만 실행되도록 만들 수 있습니다. 이것은 새로운 이벤트의 "패키지"입니다.

    라이브의 주요 문제는 페이지 상단에를 찾을 수있는 "버블 링"에 깊은 페이지 구조합니다 (DOM) 내부 요소에 클릭 이벤트 (또는 다른 이벤트)를 강제로 "창"에 연결한다는 것입니다 이 처리하고자하는 이벤트 핸들러. 각 레벨에서 모든 이벤트 핸들러를 체크 할 필요가, 이것은 당신이 깊은 imbrication을 할 경우 (

    <표> <표>
    • <버튼> 등 등 등)

      그래서, 바인딩, 같은 클릭, 기타 바로 가기 이벤트 바인더는 이벤트 대상에 직접 연결처럼. 당신의 테이블이있는 경우,하자 1000 선 100 열라고하고, 100'000 각각의 셀은 처리하는 클릭 체크 박스가 포함되어 있습니다. 100'000 이벤트 핸들러를 연결하는 페이지로드에 시간이 많이 소요됩니다. 테이블 수준에서 하나의 이벤트 만들기 및 이벤트 위임을 사용하는 것은 몇 배 더 효율적입니다. 이벤트 대상은 이벤트 실행시 검색됩니다. "이"는 "event.target"평소 "이"클릭의 기능이 될 것입니다 테이블 수 있지만 것입니다. 지금에와 좋은 점은 "이"항상 이벤트 대상, 그리고이 부착되어 용기가 될 것입니다.

    • 3.CSTE 연구진의 방법으로는 .live 가능하다) .delegate 및 .bind 동일한 기능이지만 (.live ()으로 만 .live (문서 이벤트를 위임) 할 수있다.

      CSTE 연구진의 방법으로는 .live 가능하다) .delegate 및 .bind 동일한 기능이지만 (.live ()으로 만 .live (문서 이벤트를 위임) 할 수있다.

      jQuery를 ( "# 예") 바인드 ( "클릭", FN) = jQuery를 ( "# 예제") (FN "클릭")에..;

      jQuery를 ( "# 예제"). ( "클릭", FN, ".examples을") = jQuery를 ( "# 예제") CSTE 연구진은 위임 ( "클릭", ".examples", FN)

      jQuery를 ( "# 예"). 라이브 (FN) = jQuery를 (문서) CSTE 연구진에게 ( "# 예제"를 "클릭", FN)

      내가 직접 jQuery를 소스에서이를 확인할 수 있습니다 :

      bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},

      jQuery를 (this.context)? 대부분의 경우 this.context === 문서

    • 4.(당신이 질문을 변경하기 전에 내 오프닝 문장은 더 이해했다. 원래는 "라이브와의 차이는 무엇?"라고 것)

      (당신이 질문을 변경하기 전에 내 오프닝 문장은 더 이해했다. 원래는 "라이브와의 차이는 무엇?"라고 것)

      더는 라이브와 같은보다 위임처럼, 그것은 ( "... 문서에 이벤트를 부착의 모든 방법을 통일하기 위해 ..."사실, 팀의 목적은 말했다) 기본적으로 바인드 위임의 통일 된 양식의 .

      라이브는 전체 문서에 첨부 (또는 대리인)에 기본적이다. 그것은 또는 위임 사용에 찬성 V1.7 추천되지입니다. 앞으로, 우리는 코드가 아니라 바인드 또는 위임 (또는 라이브)를 사용하는 것보다, 단독에 사용하여 볼 수 있습니다 의심 ...

      , 당신이 할 수 실제로 이렇게 :

    • 5.라이브 CSTE 연구진의 바로 가기 지금은 ()이다

      라이브 CSTE 연구진의 바로 가기 지금은 ()이다

      //from source http://code.jquery.com/jquery-1.7.js
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
}

      또한이 게시물은 당신을 위해 유용 할 수있다 http://blog.jquery.com/2011/11/03/jquery-1-7-released/

    • 6.기본 사용 사례에 대해 하나 없습니다. 이 두 라인은 기능적으로 동일합니다

      기본 사용 사례에 대해 하나 없습니다. 이 두 라인은 기능적으로 동일합니다

      $( '#element' ).bind( 'click', handler );
$( '#element' ).on( 'click', handler );

      CSTE 연구진은 () 또한 이벤트 위임 할 수 있으며, 바람직하다.

      .bind (은) 현재) (실제로는 CSTE 연구진 단지의 별칭입니다. 다음은 1.7.1에서 bind 함수의 정의입니다

      bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},

      CSTE 연구진 ()를 추가하는 아이디어는 오히려 이벤트를 바인딩에 대한 여러 기능을하는 것보다, 통일 이벤트 API를 만드는 것이 었습니다; CSTE 연구진은 () .bind 대체 (), .live ()와 .delegate ().

    • 7.당신이 요소와 관련된 이벤트 핸들러를 얻으려면 알아야 할 무엇인가 -에주의 핸들러가 부착 된 요소!

      당신이 요소와 관련된 이벤트 핸들러를 얻으려면 알아야 할 무엇인가 -에주의 핸들러가 부착 된 요소!

      예를 들어, 사용하는 경우 :

      $('.mySelector').bind('click', fn);

      당신은 사용하여 이벤트 핸들러를 얻을 것이다 :

      $('.mySelector').data('events');

      하지만 당신이 사용하는 경우 :

      $('body').on('click', '.mySelector', fn);

      당신은 사용하여 이벤트 핸들러를 얻을 것이다 :

      $('body').data('events');

      (마지막 경우 관련 이벤트 객체 = 선택을해야합니다. "mySelector을")

    from https://stackoverflow.com/questions/8065305/whats-the-difference-between-on-and-live-or-bind by cc-by-sa and MIT license

    'JQUERY' 카테고리의 다른 글

    [JQUERY] 수평 상단에 스크롤 및 테이블의 맨 아래  (0) 2020.10.06
    [JQUERY] 어떻게 JQuery와 또는 자바 스크립트와 객체의 배열을 정렬하려면 [중복]  (0) 2020.10.06
    [JQUERY] 어떻게 해제 HTML 링크에  (0) 2020.10.06
    [JQUERY] 선택된 라디오 버튼의 값을 얻을 JQuery와  (0) 2020.10.06
    [JQUERY] 방지 때 내부 소자 스크롤 위치에 도달 위쪽 / 아래쪽 부모 요소의 스크롤? [복제]  (0) 2020.10.06
    ,

티스토리툴바