on과 live 또는 bind의 차이점은 무엇입니까?
jQuery v1.7에서는 새로운 방법이 추가되었습니다.설명서에서 다음을 참조하십시오.
.on() 메서드는 jQuery 개체에서 현재 선택된 요소 집합에 이벤트 핸들러를 연결합니다.jQuery 1.7에서 .on() 메서드는 이벤트 핸들러를 연결하는 데 필요한 모든 기능을 제공합니다.'
와 무엇이 다릅니까?live그리고.bind?
on()는 jQuery의 이벤트 바인딩 함수 대부분을 하나로 병합하려는 시도입니다.이를 통해 비효율성을 개선할 수 있는 추가적인 이점이 있습니다.live 대delegatejQuery의 향후 버전에서는 이러한 메서드가 제거되고 다음과 같은 메서드만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 을 참조하십시오.
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(이 .context)?this.context===document대개의 경우에
(당신이 질문을 바꾸기 전에 제 첫 문장이 더 말이 되었습니다.원래 당신은 "무엇과 다른가?"라고 말했습니다.live?")
on그것보다 더, 그것은 기본적으로 통일된 형태입니다.bind그리고.delegate(사실, 팀의 목적은 "...사건을 문서에 첨부하는 모든 방법을 통합하는 것입니다..").
live으로 기적으로입니다.on(또는)delegate) 문서 전체에 첨부합니다.v1.7부터는 사용을 권장하지 않습니다.on또는delegate앞으로, 우리는 다음과 같은 코드를 보게 될 것입니다.on사용하기 보다는 오로지bind또는delegate(또는)live)...
따라서 실제로 다음과 같은 이점이 있습니다.
사용하다
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의 지름길입니다.
//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는 사실 지금은 .()의 별칭일 뿐입니다.다음은 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"가 포함됩니다.)
언급URL : https://stackoverflow.com/questions/8065305/whats-the-difference-between-on-and-live-or-bind
'programing' 카테고리의 다른 글
| 줄을 어떻게 매야 합니까?에서 사용자 지정 형식으로 TimeSpan 개체를 포맷합니다.NET? (0) | 2023.08.22 |
|---|---|
| "cannot run in wd"로 인해 Npm 설치 실패 (0) | 2023.08.22 |
| Microsoft Powershell 내에서 'mvn -D' 인수를 사용하여 Maven을 실행할 수 없지만 명령 프롬프트에서 작동합니다. (0) | 2023.08.22 |
| SQL 저장 프로시저에 목록 전달 <> (0) | 2023.08.22 |
| jQuery AJAX 요청의 상대 URL 대 절대 URL (0) | 2023.08.22 |