click () 대신 jQuery on ()을 사용하는 이유

현재 jQuery를 사용하면 클릭이 발생할 때 뭔가를해야 할 때 이렇게 할 것입니다.

$(".close-box").click( function() {
    MoneyBox.closeBox();
    return false;
});

나는 다른 누군가가 프로젝트에 가지고있는 코드를보고 있었고 그들은 이렇게합니다.

$(".close-box").live("click", function () {
    MoneyBox.closeBox();
    return false;
});

지금은 Deprecated이고 jQuery 문서가 on()대신 사용하라고 말하는 live () 함수를 사용하는 것을 제외하고는 내가 말할 수있는 한 똑같은 일을하는 것 같습니다. 그러나 어느 쪽이든 내 첫 번째 예제 대신 왜 live / on ()을 사용합니까?

동적으로 생성 된 요소 (예 : AJAX 호출에서 생성됨)가있을 수 있으므로 이전에 동일한 요소 선택기에 바인드 된 동일한 클릭 핸들러를 갖고 싶을 수 있습니다. 그런 다음 on()with selector 인수를 사용하여 클릭 이벤트를 "위임"합니다.

시연하려면 :

http://jsfiddle.net/AJRw3/

on()click()선택기를 지정하지 않은 경우 다음 과 동의어 일 수도 있습니다 .

$('.elementClass').click(function() { // code 
});

와 동의어이다

$('.elementClass').on('click', function() { // code
});

클래스가있는 모든 요소에 핸들러를 한 번만 추가한다는 의미에서 elementClass. elementClass예를 들어에서 오는 새 항목이있는 경우 $('<div class="elementClass" />')핸들러는 새 요소에 바인딩되지 않습니다. 다음을 수행해야합니다.

$('#container').on('click', '.elementClass', function() { // code
});

가정 #container되는 .elementClass의 조상

많은 답변이 있으며 각각 몇 가지 요점을 다룹니다. 이것이 무엇이고 어떻게 사용하는지에 대한 좋은 설명과 함께 귀하의 답변을 제공 할 수 있기를 바랍니다.

을 사용하는 click()것은의 별칭 bind('click' ...)입니다. 를 사용 bind()하면 이벤트 리스너가 설정 될 때 DOM을 그대로 사용 하고 DOM에서 일치하는 각 요소에 함수를 바인딩합니다. 즉, 사용 $('a').click(...)하면 해당 코드가 실행될 때 찾은 DOM의 모든 앵커 태그의 클릭 이벤트에 제공된 함수를 바인딩하게됩니다.

사용 live()은 jQuery에서 옛날 방식이었습니다. 이벤트를 바인딩하는 데 사용 된 것처럼 bind()코드가 실행될 때 DOM의 요소에 바인딩하는 것이 아니라 DOM의 변경 사항을 수신하고 이벤트를 향후 일치하는 요소에도 바인딩합니다. 이는 DOM 조작을 수행하고 나중에 제거 / 업데이트 / 추가 될 수 있지만 DOM이 처음로드 될 때 존재하지 않는 일부 요소에 이벤트가 있어야하는 경우에 유용합니다.

live()현재 감가 상각 된 이유 는 제대로 구현되지 않았기 때문입니다. 를 사용 live()하려면 처음에 DOM에서 하나 이상의 요소를 선택할 수 있어야했습니다 (내 생각에). 또한 함수 복사본이 각 요소에 바인딩되도록 실행되었습니다. 1000 개의 요소가있는 경우 많은 복사 된 함수입니다.

on()기능 의 생성은 이러한 문제를 극복하는 것이 었습니다. 단일 이벤트 리스너를 DOM에서 변경되지 않는 객체에 바인딩 할 수 있습니다 (따라서 on()나중에 DOM에서 제거 / 추가 될 요소 에는 사용할 수 없습니다 -부모 객체에 바인딩). 선택자와 일치하는 요소로 버블 링 될 때만 함수가 실행되도록하는 요소 "필터". 즉, 단일 요소에 바인딩 된 하나의 함수 (복사본이 아님) 만 있음을 의미합니다. DOM에 "라이브"이벤트를 추가하는 훨씬 더 나은 접근 방식입니다.

... 그것이 차이점이며 각 기능이 존재하는 이유 live()와 감가 상각 이유 입니다.

• $("a").live()-> <a>호출 후 생성 되더라도 모든에게 적용됩니다 .
• $("a").click()-> 이것이 <a>호출되기 전에 모든 사람에게만 적용됩니다 . (이것은 bind(), 및 on()1.7 의 바로 가기입니다 )
• $("a").on()-> 이벤트 핸들러 연결에 필요한 모든 기능을 제공합니다. (jQuery 1.7의 최신 버전)

인용구 :

jQuery 1.7부터 .live () 메서드는 더 이상 사용되지 않습니다. .on ()을 사용하여 이벤트 핸들러를 첨부하십시오. 이전 버전의 jQuery 사용자는 .live ()보다 .delegate ()를 우선적으로 사용해야합니다.
이 메서드는 페이지의 문서 요소에 위임 된 이벤트 처리기를 연결하는 수단을 제공하여 콘텐츠가 페이지에 동적으로 추가 될 때 이벤트 처리기 사용을 단순화합니다. 자세한 내용은 .on () 메서드에서 직접 대 위임 이벤트에 대한 설명을 참조하십시오.

.on () 메서드는 jQuery 객체에서 현재 선택된 요소 집합에 이벤트 핸들러를 연결합니다. jQuery 1.7부터 .on () 메서드는 이벤트 핸들러 연결에 필요한 모든 기능을 제공합니다.

이전 버전의 경우 .bind () 메서드는 이벤트 핸들러를 요소에 직접 연결하는 데 사용됩니다.

click()의 비 위임 방법에 대한 바로 가기입니다 on(). 그래서:

$(".close-box").click() === $(".close-box").on('click')

와 이벤트 위임하려면 on()즉,. 동적으로 생성 된 개체에서 다음을 수행 할 수 있습니다.

$(document).on('click', '.close-box') // Same as $('.close-box').live()

그러나, on()뿐만 아니라, 정적 요소에 위임을 소개합니다 document같은 live(), 그래서 않습니다 :

$("#closestStaticElement").on('click', '.close-box')

당신은 위로 읽어야 의 차이 live와bind .

요컨대, live이벤트 위임을 사용 하여 현재와 ​​미래에 존재하는 요소에 바인딩 할 수 있습니다.

대조적으로,를 통해 연결된 핸들러 bind(및 같은 단축키 click) 는 선택기와 일치하는 DOM 요소 에 핸들러를 직접 연결 하므로 현재 존재하는 요소에만 바인딩됩니다.

의 결과 live의 유연성은 당신이 제공하는 기능을 필요로 할 때 그렇게 밖에 이용, 성능이 저하됩니다.

$el.click(fn) 바로 가기입니다 $el.on('click', fn)

자세한 내용은 http://api.jquery.com/click/ 및 http://api.jquery.com/on/ 을 참조하십시오.

일부 이벤트 핸들러를 바인딩해야 할 때 dynamically added elements사용 live(사용되지 않음)하거나 on작동하도록해야합니다. 간단하게 $('element').click(...);는 DOM에 어떤 동적으로 추가 요소에서 작동하지 않습니다.

jQuery의 .bind (), .live () 및 .delegate ()의 차이점 에 대해 자세히 알아보십시오 .

$ .click ()은 단순히 bind 또는 on에 대한 바로 가기입니다. jQuery 문서에서 :

처음 두 가지 변형에서이 메서드는 jQuery 1.7부터 .on ( "click", handler)뿐만 아니라 .bind ( "click", handler)에 대한 바로 가기입니다. 세 번째 변형에서 .click ()이 인수없이 호출되면 .trigger ( "click")의 바로 가기입니다.

이 .on()메소드는 jQuery 객체에서 현재 선택된 요소 집합에 이벤트 핸들러를 연결합니다. 이 click()메서드는 이벤트 처리기를 "click"JavaScript 이벤트에 바인딩하거나 요소에서 해당 이벤트를 트리거합니다.

평야에서 .click(... 선택기의 대상이 즉석에서 변경되면 (예 : 일부 ajax 응답을 통해) 동작을 다시 할당해야합니다.

은 .on(...(jQuery를 1.7) 아주 새로운 및 어쨌든 동작을 첨부 할 수있는 빠른 방법입니다 위임 이벤트를 사용하여 라이브 시나리오를 커버 할 수있다.

에 on있어서, 이벤트 핸들러 대신 타겟의 부모 구성 요소에 부착된다.

예: $(document).on("click", ".className", function(){});

위의 예에서는 클릭 이벤트 핸들러가 문서에 첨부되어 있습니다. 그리고 누군가가 대상 요소를 클릭했는지 여부를 알기 위해 이벤트 버블 링을 사용합니다.