[javascript] addEventListener 리스너 함수에 인수를 전달하는 방법은 무엇입니까?

상황은 다소

var someVar = some_other_function();
someObj.addEventListener("click", function(){
    some_function(someVar);
}, false);

문제는 someVar의 리스너 함수 내 에서 값이 보이지 않아 addEventListener새 변수로 취급 될 수 있다는 것입니다.

답변

작성한 코드에는 아무런 문제가 없습니다. 모두 some_function와 someVar액세스 할 수 있어야합니다, 경우에 그들은 익명 곳 맥락에서 사용할 수 있었던

function() { some_function(someVar); }

만들어졌습니다.

경고가 원하는 값을 제공하는지 확인하십시오. 익명 함수 범위 내에서 액세스 할 수 있는지 확인하십시오 ( someVar에 대한 호출 옆에 동일한 변수 에서 작동하는 코드가 더없는 경우 addEventListener)

var someVar; 
someVar = some_other_function();
alert(someVar);
someObj.addEventListener("click", function(){
    some_function(someVar);
}, false);

답변

왜 이벤트의 대상 속성에서 인수를 가져 오지 않습니까?

예:

const someInput = document.querySelector('button');
someInput.addEventListener('click', myFunc, false);
someInput.myParam = 'This is my parameter';
function myFunc(evt)
{
  window.alert(evt.currentTarget.myParam);
}

<button class="input">Show parameter</button>

스 니펫 확장

JavaScript는 프로토 타입 지향 언어입니다. 기억하십시오!

답변

이 질문은 오래되었지만 후손을 위해 ES5의 .bind ()를 사용하는 대안을 제공 할 것이라고 생각했습니다. 🙂

function some_func(otherFunc, ev) {
    // magic happens
}
someObj.addEventListener("click", some_func.bind(null, some_other_func), false);

bind에 전달할 인수로 첫 번째 param (다른 함수)으로 리스너 함수를 설정해야하며 두 번째 param은 이제 이벤트가됩니다 (첫 번째 대신) .

답변

필요한 모든 인수를 ‘bind’로 바인딩 할 수 있습니다.

root.addEventListener('click', myPrettyHandler.bind(null, event, arg1, ... ));

이러한 방법으로 당신은 항상거야 event, arg1전달 및 기타 물건을 myPrettyHandler.

http://passy.svbtle.com/partial-application-in-javascript-using-bind

답변

아주 오래된 질문이지만 오늘도 같은 문제가있었습니다. 내가 찾은 가장 깨끗한 해결책은 카레 개념을 사용하는 것입니다 .

그 코드 :

someObj.addEventListener('click', some_function(someVar));

var some_function = function(someVar) {
    return function curried_func(e) {
        // do something here
    }
}

커리 함수의 이름을 지정하면 나중에 실행 시간에 eventListener를 등록 취소하기 위해 Object.removeEventListener를 호출 할 수 있습니다.

답변

함수를 변수로 선언하여 인수로 이벤트 리스너를 추가 및 제거 할 수 있습니다.

myaudio.addEventListener('ended',funcName=function(){newSrc(myaudio)},false);

newSrc매개 변수로 myaudio를 사용하는 메소드
funcName는 함수 이름 변수입니다.

리스너를 제거 할 수 있습니다
myaudio.removeEventListener('ended',func,false);

답변

클로저로 알려진 자바 스크립트 기능을 통해 somevar를 값으로 (참조가 아닌) 전달할 수 있습니다 .

var someVar='origin';
func = function(v){
    console.log(v);
}
document.addEventListener('click',function(someVar){
   return function(){func(someVar)}
}(someVar));
someVar='changed'

또는 다음과 같은 일반적인 랩 함수를 작성할 수 있습니다 wrapEventCallback.

function wrapEventCallback(callback){
    var args = Array.prototype.slice.call(arguments, 1);
    return function(e){
        callback.apply(this, args)
    }
}
var someVar='origin';
func = function(v){
    console.log(v);
}
document.addEventListener('click',wrapEventCallback(func,someVar))
someVar='changed'

여기는 다음 wrapEventCallback(func,var1,var2)과 같습니다

func.bind(null, var1,var2)