답변:
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를 참조 하십시오 .
$(document.body).delegate("click", ".mySelector", fn);해야$(document.body).delegate(".mySelector", "click", fn);
on자연과 매우 가깝습니다 delegate. 그렇다면 왜 대리자를 사용하지 않습니까? on혼자 오지 않기 때문 입니다. 거기에 off바인딩을 해제 이벤트와, one한 번만 실행되는 이벤트를 만들 수 있습니다. 이것은 새로운 이벤트의 "패키지"입니다.
주요 문제점은 live"창"에 연결되어 페이지 구조 (돔) 내부의 요소에 대한 클릭 이벤트 (또는 다른 이벤트)를 강제로 발생시켜 이벤트를 찾기 위해 페이지 상단으로 "버블 링"하는 것입니다. 핸들러가 기꺼이 처리합니다. 각 수준에서 모든 이벤트 처리기를 확인해야합니다. 심하게 찌르면 ( <body><div><div><div><div><table><table><tbody><tr><td><div><div><div><ul><li><button> etc etc etc...)
그래서, bind같은 click다른 바로 가기 이벤트 바인더는 이벤트 대상에 직접 연결처럼. 1000 줄과 100 열의 표가 있고 각 100'000 셀에는 클릭 할 처리하는 확인란이 있습니다. 100'000 개의 이벤트 처리기를 연결하면 페이지를로드 하는 데 많은 시간 이 걸립니다 . 테이블 수준에서 단일 이벤트를 만들고 이벤트 위임을 사용하는 것이 몇 배나 더 효율적입니다. 이벤트 실행시 이벤트 대상이 검색됩니다. " this"는 표가되지만 함수 에서 event.target" this"는 일반적인 " "입니다 click. 이제 좋은 점 on은 " this"가 첨부 된 컨테이너가 아니라 항상 이벤트 대상 이된다는 것입니다 .
와 .on방법은 할 수있다 .live, .delegate와 .bind같은 기능을하지만, 함께 .live()에만 .live()가능 (문서에 이벤트를 위임)됩니다.
jQuery("#example").bind( "click", fn ) = jQuery( "#example").on( "click", fn );
jQuery("#example").delegate( ".examples", "click", fn ) = jQuery( "#example" ).on( "click", ".examples", fn )
jQuery("#example").live( fn ) = jQuery( document ).on( "click", "#example", 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=== document대부분의 경우
(질문을 변경하기 전에 내 첫 문장이 더 의미가 있습니다. 원래 "당신과의 차이점은 live무엇입니까?"
on보다 더 비슷 delegate합니다. live기본적으로 통일 된 형태 bind이며 delegate(실제로 팀은 그 목적이 "... 이벤트를 문서에 첨부하는 모든 방법을 통일하는 것" 이라고 말했습니다 . " )
live기본적으로된다 on(또는 delegate) 전체 문서에 첨부. 그것은 것 V1.7 추천되지 사용에 찬성 on또는 delegate. 앞으로, 또는 (또는 )를 on사용하는 대신 코드를 단독으로 사용 하는 것으로 보입니다 .binddelegatelive
실제로는 다음을 수행 할 수 있습니다.
다음 on과 같이 사용하십시오 bind.
/* Old: */ $(".foo").bind("click", handler);
/* New: */ $(".foo").on("click", handler);다음 on과 같이 사용하십시오 delegate(주어진 요소에 기반을 둔 이벤트 위임) :
/* Old: */ $("#container").delegate(".foo", "click", handler);
/* New: */ $("#container").on("click", ".foo", handler);다음 on과 같이 사용하십시오 live(문서에 기반을 둔 이벤트 위임).
/* Old: */ $(".foo").live("click", handler);
/* New: */ $(document).on("click", ".foo", handler);on과의 조합 bind이며 delegate, 내가 말했듯이별로 좋아하지 않습니다 live. 당신은 사용할 수 있습니다 on처럼 bind(요소에 직접 핸들러를 첨부), 또는 당신이 사용할 수있는 on것처럼 delegate(요소에 핸들러를 연결하지만, 실제 요소가 일치에게 선택을 클릭 한 경우에만 이벤트가 발생하고, 그 요소 것처럼 하나였다 이벤트에 무슨 일이 있었 - 예를 들어, 이벤트 위임), 또는 당신은 같이 사용할 수 있습니다 live( delegate) 루트로 문서를 사용하여. 요소를 동적으로 추가하는 경우 유용하게 만드는 것은 이벤트 위임입니다.
$("#id", ".class").live(fn)= $(".class").delegate("#id", fn );실제로 오래된 jQuery 소스에서는 라이브를 일반적인 경우로 사용하고 특수한 경우로 위임했습니다.
delegate바로 빨리 추가 되었지만 여전히 사용 했기 때문에 그것이 알려진 용도라고 생각하지 않습니다 . :-)
live는 .on ()의 지름길입니다.
//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/
기본 사용 사례는 없습니다. 이 두 줄은 기능적으로 같습니다
$( '#element' ).bind( 'click', handler );
$( '#element' ).on( 'click', handler );.on ()도 이벤트 위임을 수행 할 수 있으며 선호됩니다.
.bind ()는 실제로 .on ()의 별칭 일뿐입니다. 1.7.1의 바인드 함수 정의는 다음과 같습니다.
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},.on ()을 추가하는 아이디어는 이벤트 바인딩을위한 여러 함수를 갖지 않고 통합 이벤트 API를 작성하는 것이 었습니다. .on ()은 .bind (), .live () 및 .delegate ()를 대체합니다.
요소와 연관된 이벤트 핸들러를 가져 오려면 알아야 할 사항-핸들러가 연결된 요소에주의하십시오!
예를 들어 다음을 사용하는 경우 :
$('.mySelector').bind('click', fn);다음을 사용하여 이벤트 핸들러를 가져옵니다.
$('.mySelector').data('events');그러나 당신이 사용하는 경우 :
$('body').on('click', '.mySelector', fn);다음을 사용하여 이벤트 핸들러를 가져옵니다.
$('body').data('events');(마지막 경우 관련 이벤트 객체는 selector = ". mySelector"를 갖습니다)
events어쨌든 문서화 나는 더 이상 1.9에서 작동 생각하지 않습니다