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

on()대부분의 jQuery의 이벤트 바인딩 함수를 하나로 병합하려는 시도입니다. 이것은 livevs로 비 효율성을 정리하는 추가 보너스를가집니다 delegate. jQuery를 향후 버전에서는이 방법이 제거됩니다 만 on하고 one남아있을 것입니다.

예 :

// 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는 이러한 모든 메소드 와 속기 이벤트 핸들러 세터를 메소드에 맵핑 하며on() , 이제는이 메소드를 무시하고 사용해야합니다 on.

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를 참조 하십시오 .

답변

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 );
},

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

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

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

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

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

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

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