jQuery의 이벤트 핸들러에 인수를 어떻게 전달할 수 있습니까?


답변:


111

가장 간단한 방법은 이렇게하는 것입니다 (이벤트 정보가 함수에 전달되는 것을 원하지 않는다고 가정) ...

$("#myid").click(function() {
    myfunction(arg1, arg2);
});

jsFiddle .

이렇게하면 click이벤트가 트리거 될 때 호출되는 익명 함수가 생성됩니다 . 이것은 차례로 myfunction()당신이 제공하는 인수 로 호출 됩니다.

당신은 유지하려는 경우 ThisBinding(값 this이벤트를 트리거 요소로 설정 함수가 호출 될 때를) 다음과 함께 함수를 호출합니다 call().

$("#myid").click(function() {
    myfunction.call(this, arg1, arg2);
});

jsFiddle .

예제에서 설명한 방식으로 참조를 직접 전달할 수 없으며 단일 인수가 jQuery event객체가 됩니다.

당신이 경우 않는 참조를 전달하려면, 당신은 jQuery의 활용해야한다 proxy()(크로스 브라우저 랩퍼 인 기능 Function.prototype.bind()). 이것은 당신이 바인딩 인수를 전달할 수 있습니다 전에event 인수입니다.

$("#myid").click($.proxy(myfunction, null, arg1, arg2));   

jsFiddle .

이 예에서, myfunction()함께 실행됩니다의 ThisBinding손상 ( null하지 객체, 그래서 정상적인 this이벤트가 사용되는 트리거 요소의 값) 인수 (순서대로)와 함께, arg1, arg2그리고 마지막의 jQuery event당신이 무시할 수 개체, 필요하지 않은 경우 (함수 인수에 이름을 지정하지 마십시오).

또한 jQuery event객체를 사용하여 data데이터를 전달할 수 있지만 ( 질문에 언급 된 것과 같은 함수 인수 가 아님)을 myfunction()통해 액세스 하도록 수정 하거나 적어도 이전 예제 또는 생성 된 것과 같은 수동 프록시 기능을 도입해야합니다. 후자의 예를 사용합니다.event.data.arg1


2
myfunction ()에서 jquery 컨텍스트 $ (this)를 잃게됩니다. 유지하려면 myfunction(this, arg1, arg2)익명 처리기에서 호출 하십시오. 그런 다음 기능을 수행 할 수 있습니다myfunction(el, arg1, arg2) { alert($(el).val()); }
lambinator

11
@geosteve : 유지하려면 myfunction.call(this, arg1, arg2).
alex

1
질문이 묻는 것처럼 함수에 인수를 전달하는 것이 아닙니다. 다른 함수를 호출하는 함수를 호출하고 있습니다. 익명 함수 내에 함수를 중첩하는 것은 익명 함수를 쉽게 바인딩 해제 할 수 없기 때문에 좋은 생각이 아닙니다.
George Filippakos 2013 년

1
@ geo1701 사용자 지정 네임 스페이스를 사용하고 한 번만 바인딩 할 수 있습니다. 대부분의 경우 괜찮습니다. 그러나 당신은 당신이 언급 한 혜택을 잃게됩니다.
alex

1
@ geo1701에 동의하여 이벤트 핸들러를 제거해야했으며 그의 솔루션은 작동하는 유일한 솔루션입니다.
Pavel K

76
$("#myid").on('click', {arg1: 'hello', arg2: 'bye'}, myfunction);

function myfunction(e) {

    var arg1 = e.data.arg1;
    var arg2 = e.data.arg2;

    alert(arg1);
    alert(arg2);

}

//call method directly:
myfunction({
    arg1: 'hello agian', 
    arg2: 'bye again'
});

또한 on 및 off 메서드를 사용하여 특정 이벤트 처리기를 바인딩 및 바인딩 해제 할 수 있습니다.

예:

$("#myid").off('click', myfunction);

이것은 #myid에서 myfunction 핸들러의 바인딩을 해제합니다.


질문이 묻는 것처럼 함수에 인수를 전달하는 것이 아닙니다.
alex

4
이것이 인수를 전달하는 방법입니다 (객체 내부로 래핑).
George Filippakos 2013 년

데이터를 전달하는 방법이지만 함수 인수를 호출하는 것은 스트레치입니다.
alex

6
On / Off 메서드를 사용하여 권장되는 바인딩 및 바인딩 해제 리스너 패턴을 사용하므로 허용되는 답변에 대한 더 나은 솔루션입니다.
George Filippakos

7
바인딩 해제가 매우 드물다고 생각한다면 경험이 매우 제한적이어야합니다. 다른 사람의 똥 기여를 똥을 내지 마십시오. 이것은 경쟁이 아닌 집단 지식 기반입니다. 정답이나 오답이 없습니다.
George Filippakos 2013 년

12

확실히 Alex의 대답을 사용해야하지만 프로토 타입 라이브러리의 "bind"메서드는 Ecmascript 5에서 표준화되었으며 곧 브라우저에서 기본적으로 구현 될 것입니다. 다음과 같이 작동합니다.

jQuery("#myid").click(myfunction.bind(this, arg1, arg2));

2
this당신은, 예를 들어,이 방법을 사용하는 경우 다른 컨텍스트로 설정 될 bind()에 보내고 this그 상황에서 (글로벌) 갖는 클릭 핸들러가 발생할 수 있습니다 window으로 객체를 this받는 참조에 반대 #myid요소?
alex

2
@alex 당신이 맞습니다. jQuery는 이벤트 핸들러에서 #myid 요소를 'this'에 바인딩하고 bind 메서드를 사용하면이를 재정의합니다. 나는 몇 년 전에이 글을 썼다. 그 당시에 내가 생각하고 있던 것을 말하기가 어렵다. 나는 내 대답을 읽는 사람들이 이러한 세부 사항을 스스로 파악할만큼 똑똑하다고 가정합니다.
브르타뉴어

12
그것은 매우 위험한 가정입니다.
Travis

@Travis이 글을 쓰는 시점 (Breton이 답변 한 지 거의 11 년 후), caniuse.com은 98.87 % 의 브라우저에서 Ecmascript 5를 지원한다고보고했습니다 . ( caniuse.com/#search=ECMAScript%205 참조 )
Stephan

@Stephan 내 혀의 뺨에 대한 의견은 Ecmascript에 대한 people reading my answers are smart enough to figure these details out themselves것이 아니라 가정하기 위해 @Breton을 대상으로했습니다 .
Travis

6

이전 스레드이지만 검색 용입니다. 시험:

$(selector).on('mouseover',...);

... "data"매개 변수를 확인하십시오 : http://api.jquery.com/on/

예 :

function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {name: "Karl"}, greet );
$( "button" ).on( "click", {name: "Addy"}, greet );

4

이미 훌륭한 답변이 있지만 어쨌든 여기에 제 2 센트가 있습니다. 다음을 사용할 수도 있습니다.

$("#myid").click({arg1: "foo", arg2: "bar"}, myfunction)

그리고 청취자는 다음과 같습니다.

function myfunction(event){ alert(event.data.arg1); alert(event.data.arg2); }


2

단순한:

$(element).on("click", ["Jesikka"],  myHandler);

function myHandler(event){
   alert(event.data);     //passed in "event.data"
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.