jQuery: $().click(fn) 대 $().bind('click',fn);

jQuery: $().click(fn) 대 $().bind('click',fn);

jQuery를 사용하여 이벤트 핸들러를 연결할 때 클릭 방법을 사용하는 것과 차이가 있습니까?

$().click(fn)

바인딩 방법 사용과 비교

$().bind('click',fn);

바인딩의 선택적 데이터 매개 변수가 아닙니다.

jQuery 소스의 가치:

jQuery.each( ("blur,focus,load,resize,scroll,unload,click,dblclick," +
    "mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave," +
    "change,select,submit,keydown,keypress,keyup,error").split(","), function(i, name){

    // Handle event binding
    jQuery.fn[name] = function(fn){
        return fn ? this.bind(name, fn) : this.trigger(name);
    };
});

그러니까, 차이는 없어요.

$().click(fn)

호출들

$().bind('click',fn)

Matthew의은 + Matthew 답 +1 지 한 둘 이 이 의 상 번 벤 트 핸 러 를 바 할 수 들 있 딩 도 점 같 할 것 언 니 다 습 에 해 야 급 을 는 다 변 이 인 의 에대 만 해 ▁handler▁in ▁more ▁▁+▁using,▁event▁bind▁one▁you▁go▁can한▁that▁▁than▁one▁for다▁matthew▁but습1▁i것▁answers할답변'▁mention에야언에bind

$('#myDiv').bind('mouseover focus', function() {
    $(this).addClass('focus')
});

이는 다음에 해당하는 훨씬 더 깨끗합니다.

var myFunc = function() {
    $(this).addClass('focus');
};
$('#myDiv')
    .mouseover(myFunc)
    .focus(myFunc)
;

두 번째 양식을 사용하여 사용자 지정 이벤트를 바인딩할 수 있다는 점에서 한 가지 차이점이 있습니다.그렇지 않으면, 그들은 동의어인 것처럼 보입니다.참조: jQuery 이벤트 문서

바인딩의 [data] 매개 변수는 바인딩 시에만 한 번 발생합니다.

사용자 지정 이벤트를 바인딩의 첫 번째 매개 변수로 지정할 수도 있습니다.

.click()이 훨씬 논리적이라고 생각하지만, 그것이 당신이 사물을 생각하는 방식이라고 생각합니다.

$('#my_button').click(function() { alert('BOOM!'); });

당신이 얻는 것만큼 단순한 것 같군요

Google Chrome이 있고 개발자 도구에 이벤트 수신기 도구가 있는 경우 이벤트를 감시할 요소를 선택합니다.

두 가지 방법을 모두 시도하면 동일한 결과가 나온다는 것을 알게 될 것이므로 두 가지 방법은 동등합니다.

.live()와의 인터페이스 일관성 때문에 .bind()를 선호합니다.코드를 더 쉽게 읽을 수 있게 해줄 뿐만 아니라 다른 방법 대신 하나의 방법을 사용하도록 코드 줄을 쉽게 변경할 수 있습니다.

말씀하신 세 가지 코드 스니펫은 이벤트 처리 및 이벤트 위임 측면에서 약간의 차이가 있습니다.각 항목을 분류해 보겠습니다.

1. $(.myBtn").click(function(){});: 이 코드는 실행 시 클래스 "myBtn"이 있는 모든 요소에 클릭 이벤트 처리기를 직접 바인딩합니다.이벤트 핸들러를 해당 요소에 직접 연결합니다.이 코드가 실행된 후 동일한 클래스의 새 요소가 동적으로 추가되면 클릭 이벤트 핸들러가 연결되지 않습니다.

2. $(.myBtn").on("click", function(){});: 이 코드는 클래스가 "myBtn"인 모든 요소에 클릭 이벤트 핸들러를 바인딩하기도 하지만 on 메서드를 사용하여 이벤트 핸들러를 연결합니다.on 방법은 이벤트 핸들러를 바인딩하는 보다 유연한 방법이며 여러 이벤트를 처리하고 이벤트 위임을 수행할 수 있습니다.첫 번째 코드 스니펫과 마찬가지로 이 코드가 실행된 후 새 요소가 동적으로 추가되면 클릭 이벤트 핸들러가 연결되지 않습니다.

3. $(document.on("click", ".myBtn", function(){};: 이 코드는 이벤트 위임을 사용하여 클릭 이벤트 핸들러를 문서 개체에 바인딩하지만 이벤트 대상이 선택기 ".myBtn"과 일치하는 경우에만 핸들러를 실행하도록 지정합니다.즉, 클릭 이벤트는 문서에 위임되며, ".myBtn" 선택기와 일치하는 요소에 발생하는 모든 클릭 이벤트는 바인딩 시에 존재하는지 또는 나중에 동적으로 추가되는지에 관계없이 이벤트 처리기를 의미합니다.

4. $(.myBtn").bind("click", function(){});: bind() 메서드는 jQuery에서 이벤트 바인딩의 이전 버전입니다.on() 메서드와 유사하지만 jQuery 버전 3.0에서 더 이상 사용되지 않습니다.여러 이벤트 핸들러를 요소에 바인딩할 수 있지만 on()에서 제공하는 일부 기능과 유연성이 부족합니다.

세 가지 접근 방식의 주요 차이점은 이벤트 위임에 있습니다.세 번째 접근 방식은 동적으로 추가된 요소를 처리하거나 이벤트 핸들러를 공통 상위 요소(예: 문서)에 부착하고 하위 요소에서 거품이 발생하는 이벤트를 처리하려는 경우에 유용합니다.

요약:

• 접근 방식 1은 이벤트 처리기를 기존 요소에 직접 바인딩합니다.
• 또한 접근 방식 2는 이벤트 처리기를 기존 요소에 바인딩하지만 여러 이벤트를 처리할 수 있는 유연성을 제공합니다.
• 접근법 3은 이벤트 위임을 사용하여 이벤트를 공통 상위 요소에 위임하여 기존 요소와 동적으로 추가된 요소의 이벤트를 처리합니다.
• 접근 방식 4는 jQuery의 이벤트 바인딩의 이전 버전입니다(jQuery 3.0에서는 사용되지 않음).on() 방법과 유사하지만 일부 기능과 유연성이 부족합니다.

언급URL : https://stackoverflow.com/questions/518762/jquery-clickfn-vs-bindclick-fn