jQuery.live()와 .on()의 차이점은 무엇입니까?

jQuery.live()와 .on()의 차이점은 무엇입니까?

새로운 방법이 있겠군요..on()대신하는 jQuery 1.7에서.live()이전 버전에서는

저는 그들 사이의 차이점과 이 새로운 방법을 사용함으로써 얻을 수 있는 이점이 무엇인지 알고 싶습니다.

라이브를 사용하고 싶지 않은 이유가 문서에 꽤 분명합니다.펠릭스가 언급한 것처럼.on보다 효율적으로 이벤트를 첨부할 수 있습니다.

jQuery의 최신 버전에서는 단점이 없는 더 나은 메서드를 제공하므로 .live() 메서드를 사용하지 않는 것이 좋습니다.특히 .live()를 사용할 경우 다음과 같은 문제가 발생합니다.

• jQuery는 선택자가 지정한 요소를 불러오기 전에 검색을 시도합니다..live()대용량 문서에서 시간이 많이 걸릴 수 있는 메서드입니다.
• 체인 방식은 지원되지 않습니다.예를들면,$("a").find(".offsite, .external").live( ... ); 유효하지 않으며 예상대로 작동하지 않습니다.
• 모쪼록.live()이벤트가 첨부됩니다.document요소, 이벤트가 처리되기 전에 가능한 가장 길고 느린 경로를 선택합니다.
• 이벤트 핸들러 호출은 문서의 하위에 첨부된 이벤트 핸들러를 중지하는 데 효과적이지 않습니다. 이벤트는 이미 다음으로 전파되었습니다.document.
• 그.live()메소드는 놀랄 수 있는 방법으로 다른 이벤트 메소드와 상호작용합니다. 예를 들어,$(document).unbind("click")호출에 의해 연결된 모든 클릭 핸들러를 제거합니다..live()!

사람들이 이사할 때 우연히 발견되는 한가지 차이점.live()로..on()그것이 그들을 위한 매개변수인가요?.on()이벤트를 DOM에 동적으로 추가된 요소에 바인딩할 때는 약간 다릅니다.

여기 우리가 사용했던 구문의 예가 있습니다..live()방법:

$('button').live('click', doSomething);

function doSomething() {
    // do something
}

이제 와 함께.live()jQuery 버전 1.7에서 더 이상 사용되지 않고 버전 1.9에서 제거된 당신은.on()방법.다음은 다음을 사용한 동등한 예입니다..on()방법:

$(document).on('click', 'button', doSomething);

function doSomething() {
    // do something
}

버튼 자체보다는 문서에 불리하게 전화를 드리는 점 참고 부탁드립니다.두 번째 매개 변수에서 듣고 있는 이벤트의 요소에 대한 선택기를 지정합니다.

위의 예에서, 제가 전화한 것은.on()그러나 문서에서는 선택기에 가까운 요소를 사용하면 성능이 향상됩니다.호출하기 전에 페이지에 존재하는 한 모든 상위 요소가 작동합니다..on().

이것은 여기 설명서에 설명되어 있지만 놓치기 쉽습니다.

공식 블로그 보기

[..]새로운 .on() 및 .off() API는 jQuery의 문서에 이벤트를 첨부하는 모든 방법을 통합합니다. 입력하기에 더 짧습니다![...]

.live()

이 메서드는 현재 및 미래의 선택기와 일치하는 모든 요소에 대한 이벤트 핸들러를 첨부하는 데 사용됩니다.

$( "#someid" ).live( "click", function() {
  console.log("live event.");
});

그리고.

.on()

이 방법은 아래 선택한 요소에 하나 이상의 이벤트에 대한 이벤트 핸들러 함수를 첨부하는 데 사용됩니다.

$( "#someid" ).on( "click", function() {
  console.log("on event.");
});

온 대 라이브의 차이에 대한 좋은 튜토리얼

위 링크에서 인용합니다.

.live()에 무슨 문제가 있습니까?

jQuery의 최신 버전에서는 단점이 없는 더 나은 메서드를 제공하므로 .live() 메서드를 사용하지 않는 것이 좋습니다.특히 .live()를 사용할 경우 다음과 같은 문제가 발생합니다.

1. jQuery는 .live() 메서드를 호출하기 전에 선택자가 지정한 요소를 검색하려고 시도하므로 큰 문서에서 시간이 많이 걸릴 수 있습니다.
2. 체인 방식은 지원되지 않습니다.예를 들어 $("a").find(.offsite, .external").live( … );가 올바르지 않으며 예상대로 작동하지 않습니다.
3. 모든 .live() 이벤트는 문서 요소에 첨부되므로 이벤트를 처리하기 전에 가능한 가장 길고 느린 경로를 선택합니다.
4. 이벤트 핸들러에서 event.stopPropagation()을 호출하는 것은 문서의 하위에 첨부된 이벤트 핸들러를 중지하는 데 효과적이지 않으며, 이벤트는 이미 문서로 전파되었습니다.
5. .live() 메서드는 $(문서)와 같은 놀라운 방법으로 다른 이벤트 메서드와 상호 작용합니다.unbind("click")는 .live()!에 대한 호출에 의해 연결된 모든 클릭 핸들러를 제거합니다.

더 자세한 정보는 확인해보세요.. 라이브 ()와 .on.

.라이브 () 방식은 컨텐츠의 동적 생성을 다룰 때 사용됩니다...Jquery Slider의 값을 변경할 때 탭을 추가하는 프로그램에서 만든 것처럼 모든 탭에 닫기 버튼 기능을 추가하고 싶습니다.내가 시도한 코드는..

var tabs = $('#tabs').tabs();
                                        // live() methos attaches an event handler for all
                                        //elements which matches the curren selector
        $( "#tabs span.ui-icon-close" ).live( "click", function() {


            // fetches the panelId attribute aria-control which is like tab1 or vice versa
            var panelId = $( this  ).closest( "li" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
        });

그리고 꽤 멋지게 작동합니다.

저는 jQuery를 사용하는 Chrome extension "Comment Save"의 저자입니다..live(). 확장자가 작동하는 방법은 를 사용하는 모든 텍스트 영역에 리스너를 부착하는 것입니다.live()- 문서가 변경될 때마다 청취자를 모든 새로운 텍스트 영역에 부착하기 때문에 이것은 잘 작동했습니다.

이사했습니다..on()하지만 그것도 잘 안 돼요.문서가 변경될 때마다 수신기가 연결되지 않으므로 다시 사용하기로 되돌아갔습니다..live(). 그것은 내가 추측하는 버그입니다..on(). 조심하세요.

브라우저 마감 이벤트를 확인해야 하는 요구사항이 있습니다.조사를 마치고 jQuery 1.8.3을 사용하여 다음과 같이 하고 있습니다.

1. 하이퍼링크를 클릭하면 다음 jQuery를 사용하여 플래그 켜기

   $('a').라이브 (' 클릭', 함수 () {cleanSession = false;});

2. 제출의 입력 버튼 유형을 클릭할 때 다음 jQuery를 사용하여 플래그 켜기

$("input[type=submit]".라이브 (' 클릭", 함수 () {alert(' 입력 버튼 클릭'; cleanSession=false;}))

1. 양식 제출이 발생하면 다음 jQuery를 사용하여 플래그 켜기

$('form').라이브 ('submit', 함수 () {cleanSession = false;};

중요한 것은 .live 대신 .on을 사용하는 경우에만 솔루션이 작동합니다..on을 사용하면 폼 제출 후 이벤트가 발생하고 너무 늦습니다.javascript call (document.form.submit)을 사용하여 양식을 제출하는 경우가 많습니다.

따라서 .live와 .on 사이에는 핵심적인 차이점이 있습니다.live를 사용하면 이벤트가 즉시 꺼지지만 .on으로 전환하면 제때 꺼지지 않습니다.

언급URL : https://stackoverflow.com/questions/8042576/whats-the-difference-between-jquery-live-and-on