JavaScript에서 익명 함수에 인수를 전달하려면 어떻게해야합니까?

Question

JavaScript에서 익명 함수에 인수를 전달하는 방법을 알아 내려고하고 있습니다.

이 샘플 코드를 체크 아웃하고 난 당신이 무슨 뜻인지 볼 생각 :

<input type="button" value="Click me" id="myButton" /> 

<script type="text/javascript"> 
    var myButton = document.getElementById("myButton"); 
    var myMessage = "it's working"; 
    myButton.onclick = function(myMessage) { alert(myMessage); }; 
</script> 

버튼에게 메시지를 클릭 : 가 나타납니다. 그러나 익명 함수 내에서 myMessage 변수는 null입니다.

jQuery는 많은 익명의 함수를 사용합니다. 그 인수를 전달하는 가장 좋은 방법은 무엇입니까? 익명 함수는 그것이 문맥에 정의 된 변수에 액세스 할 수 있습니다 생성 요소에 대한 핸들러로 할당하기 때문에

가

<script type="text/javascript"> 
    var myButton = document.getElementById("myButton"); 
    var myMessage = "it's working"; 
    myButton.onclick = function() { alert(myMessage); }; 
</script> 

이 예제는 작동합니다

Answer 1

특정 케이스는 단순히 작동하는 보정 할 수있다 만들어진. 기록, 핸들러 (당신이 속성을 XXX의 설정을 통해 할당하는 것이)에 대한

는 하나의 인자가이 DOM에 의해 전달되는 이벤트 객체입니다 걸릴 것으로 예상, 당신은을 제거함으로써이

Answer 2

다른 인수를 전달 강요 할 수 익명 함수의 매개 변수는 본문에서 사용할 수 있습니다. 더 많은 정보를 검색하십시오

myButton.onclick = function() { alert(myMessage); }; 

'자바 스크립트 폐쇄'당신이 함수에 이벤트를 바인딩하고 있기 때문에 작동하지 않습니다 완료했습니다 무엇

Answer 3

. 따라서 이벤트가 발생할 때 호출 될 매개 변수를 정의하는 이벤트입니다 (즉, 자바 스크립트는 onclick에 바인딩 한 함수의 매개 변수에 대해 알지 못하므로 아무것도 전달할 수 없습니다).

당신은 그러나이 작업을 수행 할 수 있습니다 :

<input type="button" value="Click me" id="myButton"/> 

<script type="text/javascript"> 

    var myButton = document.getElementById("myButton"); 

    var myMessage = "it's working"; 

    var myDelegate = function(message) { 
     alert(message); 
    } 

    myButton.onclick = function() { 
     myDelegate(myMessage); 
    }; 

</script> 

Answer 4

당신은 무엇을하고 함수 내부의 지역 변수를 myMessage에 할당됩니다 하나의 매개 변수를 새로운 익명 함수를 작성 했어요. 인수가 실제로 전달되지 않고 값이 전달되지 않은 인수가 null이되기 때문에 함수는 alert (null)을 수행합니다. 당신이

myButton.onclick = function() { alert(myMessage); }; 

그것은 작동처럼 쓸 수 있지만 그 질문에 대답하면 내가 모르는 경우

Answer 5

. displayMessage 기능을 실행

function displayMessage(message, f) 
{ 
    f(message); // execute function "f" with variable "message" 
} 

function alerter(message) 
{ 
    alert(message); 
} 

function writer(message) 
{ 
    document.write(message); 
} 

:

Answer 6

예 :

<input type="button" value="Click me" id="myButton"> 
<script> 
    var myButton = document.getElementById("myButton"); 
    var test = "zipzambam"; 
    myButton.onclick = function(eventObject) { 
     if (!eventObject) { 
      eventObject = window.event; 
     } 
     if (!eventObject.target) { 
      eventObject.target = eventObject.srcElement; 
     } 
     alert(eventObject.target); 
     alert(test); 
    }; 
    (function(myMessage) { 
     alert(myMessage); 
    })("Hello"); 
</script> 

Answer 7

대의원

function runDelegate() 
{ 
    displayMessage("Hello World!", alerter); // alert message 

    displayMessage("Hello World!", writer); // write message to DOM 
} 

Answer 8

이벤트 핸들러는 해고 된 이벤트 하나 개의 매개 변수를 기대합니다. 그 이름을 'myMessage'로 변경하면 메시지가 아닌 이벤트 객체에 경고합니다.

클로저를 사용하면 함수 밖에서 정의한 변수를 참조 할 수 있지만 Jquery를 사용하는 경우 이벤트 별 API를 볼 수 있습니다.

http://docs.jquery.com/Events/bind#typedatafn

이 자신의 데이터를 전달하는 옵션이 있습니다.

Answer 9

<input type="button" value="Click me" id="myButton" /> 

<script type="text/javascript"> 
    var myButton = document.getElementById("myButton"); 

    myButton.myMessage = "it's working"; 

    myButton.onclick = function() { alert(this.myMessage); }; 


</script> 

IE6 +의 모든 것을 포함하는 내 테스트 스위트에서 작동합니다. 익명 함수는 자신이 속한 객체를 인식하므로 에이라는 데이터 (이 경우 myButton)를 전달할 수 있습니다.

Answer 10

다음은 사용자가 참조한 문제를 해결하기 위해 클로저를 사용하는 방법입니다. 또한 바인딩에 영향을 미치지 않고 시간이 지남에 따라 메시지를 변경하는 사실을 고려합니다. 그리고 jQuery를 사용하여 간결하게합니다.

var msg = (function(message){ 
    var _message = message; 
    return { 
    say:function(){alert(_message)}, 
    change:function(message){_message = message} 
    }; 
})("My Message"); 
$("#myButton").click(msg.say);