[javascript] jQuery의 .bind () 대 .on ()

JAVASCRIPT / 글쓴이

나는 두 위대한 기사가 새로운 기능에 대해 이야기 발견 .on(): jquery4u.com , elijahmanor.com .

(가) 어떤 방법이 .bind()여전히보다 사용하기 더 낫다는 .on()?

예를 들어 다음과 같은 샘플 코드가 있습니다.

$("#container").click( function( e ) {} )

셀렉터가 하나의 항목을 검색했으며 내 경우에는 페이지가로드 될 때 이미 <div>이름 #container이 존재한다는 것을 알 수 있습니다. 동적으로 추가되지 않습니다. 최신 버전의 jQuery를 사용한다는 것을 언급하는 것이 중요합니다 : 1.7.2.

해당 샘플의 경우 함수에서 제공하는 다른 기능을 사용하지 않더라도 .on()대신 .bind()사용해야 .on()합니까?

답변

내부적으로 현재 버전의 jQuery에 .bind직접 매핑됩니다 .on. (동일하게 적용됩니다 .live.) 따라서 .bind대신 사용하면 작지만 실질적으로 중요하지 않은 성능 저하가 있습니다 .

그러나 .bind향후 버전에서 언제든지 제거 될 수 있습니다. 계속 사용할 이유가없고 대신 .bind선호하는 모든 이유가 .on있습니다.

답변

이 스 니펫은 모두 정확히 동일한 기능을 수행합니다.

element.on('click', function () { ... });
element.bind('click', function () { ... });
element.click(function () { ... });

그러나 그것들은 이것들과 매우 다르며, 모두 같은 것을 수행합니다 :

element.on('click', 'selector', function () { ... });
element.delegate('click', 'selector', function () { ... });
$('selector').live('click', function () { ... });

두 번째 이벤트 핸들러 세트는 이벤트 위임을 사용 하며 동적으로 추가 된 요소에 대해 작동합니다. 위임을 사용하는 이벤트 핸들러도 훨씬 성능이 뛰어납니다. 첫 번째 세트는 동적으로 추가 된 요소에는 작동하지 않으며 성능이 훨씬 떨어집니다.

jQuery의 on() 기능은 아직 존재하지 않는 새로운 기능을 도입하지 않으며, jQuery에서 이벤트 처리를 표준화하려는 시도 일뿐입니다 (더 이상 라이브, 바인드 또는 위임 중에서 결정할 필요가 없음).

답변

직접적인 방법과 .delegate우수한 API.on 이며 더 이상 사용되지 않을 의사가 없습니다.

코드는 덜 문자열로 입력되므로 직접 메서드를 사용하는 것이 좋습니다. 자동 버그가 아닌 이벤트 이름을 잘못 입력하면 즉시 오류가 발생합니다. 제 생각에는 쓰기 click보다는 읽기 가 더 쉽습니다.on("click"

은 .delegate보다 우수 .on하기 때문에 인수의 순서 :

$(elem).delegate( ".selector", {
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
});

대의원의 말이 있기 때문에 바로 대의원임을 알 수 있습니다. 또한 선택기를 즉시 볼 수 있습니다.

로 .on그 즉시 심지어 위임 않다면 분명하지 않다 당신은 선택의 종료를보고 있습니다 :

$(elem).on({
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
}, "selector" );

이제, 명명 .bind은 정말 끔찍하고 액면가보다 낫습니다 .on. 그러나 .delegate위임되지 않은 이벤트를 수행 할 수없고 직접 방법이없는 이벤트가 있으므로 이와 같은 경우는 드물지만 위임 된 이벤트와 위임되지 않은 이벤트를 명확하게 분리하려는 경우에만 사용할 수 있습니다.

답변

소스 코드를 살펴보면 다음에 $.fn.bind대한 다시 쓰기 기능 일뿐입니다 on.

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

http://james.padolsey.com/jquery/#v=1.7.2&fn=$.fn.bind

답변

jQuery 문서에서 :

jQuery 1.7부터 .on () 메소드는 문서에 이벤트 핸들러를 첨부하는 데 선호되는 메소드입니다. 이전 버전의 경우 .bind () 메소드는 이벤트 핸들러를 요소에 직접 첨부하는 데 사용됩니다. 핸들러는 jQuery 객체에서 현재 선택된 요소에 첨부되므로 .bind ()에 대한 호출이 발생하는 시점에 해당 요소가 존재해야합니다. 보다 유연한 이벤트 바인딩에 대해서는 .on () 또는 .delegate ()에서 이벤트 위임에 대한 설명을 참조하십시오.

http://api.jquery.com/bind/

답변

Jquery 3.0 이상에서 .bind는 더 이상 사용되지 않으며 대신 .on을 사용하는 것을 선호합니다. @Blazemonger가 이전에 대답 했으므로 제거 될 것이고 확실하게 제거 될 것이라고 대답했습니다. 이전 버전의 경우 .bind는 내부적으로 .on을 호출하며 그 사이에는 차이가 없습니다. 자세한 내용은 API를 참조하십시오.

.bind ()에 대한 jQuery API 문서

답변