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)

someVar값은 some_function()리스너가 아닌 컨텍스트 에서만 액세스 할 수 있어야합니다 . 리스너 내에서 사용하려면 다음과 같은 작업을 수행해야합니다.

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

사용이 newVar대신.

다른 방법은 리스너에서 새로운 로컬 변수로 사용하여 someVar값 을 반환 some_function()하는 것입니다.

var someVar = some_function(someVar);

또 다른 방법이 있습니다 (이 방법은 for 루프 내에서 작동합니다).

var someVar = some_other_function();
someObj.addEventListener("click", 

function(theVar){
    return function(){some_function(theVar)};
}(someVar),

false);

Function.prototype.bind () 는 대상 함수를 특정 범위에 바인딩하고 선택적으로 this대상 함수 내에 개체를 정의하는 방법 입니다.

someObj.addEventListener("click", some_function.bind(this), false);

또는 일부 어휘 범위를 캡처하려면 (예 : 루프)

someObj.addEventListener("click", some_function.bind(this, arg1, arg2), false);

마지막으로, this목표 함수 내에 매개 변수가 필요하지 않은 경우 :

someObj.addEventListener("click", some_function.bind(null, arg1, arg2), false);

사용하다

   el.addEventListener('click',
    function(){
        // this will give you the id value 
        alert(this.id);    
    },
false);

이 익명 함수에 사용자 정의 값을 전달하려면 가장 쉬운 방법은

 // this will dynamically create property a property
 // you can create anything like el.<your  variable>
 el.myvalue = "hello world";
 el.addEventListener('click',
    function(){
        //this will show you the myvalue 
        alert(el.myvalue);
        // this will give you the id value 
        alert(this.id);    
    },
false);

내 프로젝트에서 완벽하게 작동합니다. 이것이 도움이되기를 바랍니다.

    $form.addEventListener('submit', save.bind(null, data, keyword, $name.value, myStemComment));
    function save(data, keyword, name, comment, event) {

이것이 이벤트가 올바르게 전달되는 방법입니다.

eventListener의 콜백 함수에 인수를 보내려면 격리 된 함수를 작성하고 해당 격리 된 함수에 인수를 전달해야합니다.

사용할 수있는 멋진 도우미 기능이 있습니다. 위의 "hello world 's 예제를 기반으로합니다.)

리스너를 깨끗하게 제거 할 수 있도록 함수에 대한 참조를 유지하는 것도 필요합니다.

// Lambda closure chaos.
//
// Send an anonymous function to the listener, but execute it immediately.
// This will cause the arguments are captured, which is useful when running 
// within loops.
//
// The anonymous function returns a closure, that will be executed when 
// the event triggers. And since the arguments were captured, any vars 
// that were sent in will be unique to the function.

function addListenerWithArgs(elem, evt, func, vars){
    var f = function(ff, vv){
            return (function (){
                ff(vv);
            });
    }(func, vars);

    elem.addEventListener(evt, f);

    return f;
}

// Usage:

function doSomething(withThis){
    console.log("withThis", withThis);
}

// Capture the function so we can remove it later.
var storeFunc = addListenerWithArgs(someElem, "click", doSomething, "foo");

// To remove the listener, use the normal routine:
someElem.removeEventListener("click", storeFunc);

한 가지 방법은 외부 함수를 사용 하여이 작업을 수행하는 것입니다 .

elem.addEventListener('click', (function(numCopy) {
  return function() {
    alert(numCopy)
  };
})(num));

익명 함수를 괄호로 묶고 즉시 호출하는이 방법을 IIFE (즉시 호출 함수 표현식)라고합니다.

http://codepen.io/froucher/pen/BoWwgz 에서 두 개의 매개 변수로 예제를 확인할 수 있습니다 .

catimg.addEventListener('click', (function(c, i){
  return function() {
    c.meows++;
    i.textContent = c.name + '\'s meows are: ' + c.meows;
  }
})(cat, catmeows));

내가 함수를 호출하는 것을 잘못 사용하지 않으면 bind실제로 bind메소드 가 반환하는 새로운 함수를 만듭니다 . 기본적으로 익명 함수처럼 이벤트 리스너를 제거하려는 경우 나중에 문제가 발생합니다.

// Possible:
function myCallback() { /* code here */ }
someObject.addEventListener('event', myCallback);
someObject.removeEventListener('event', myCallback);

// Not Possible:
function myCallback() { /* code here */ }
someObject.addEventListener('event', function() { myCallback });
someObject.removeEventListener('event', /* can't remove anonymous function */);

그러니 염두에 두십시오.

ES6을 사용하는 경우 제안 된 것과 동일하지만 약간 더 깨끗할 수 있습니다.

someObject.addEventListener('event', () => myCallback(params));

좋은 한 줄 대안

element.addEventListener('dragstart',(evt) => onDragStart(param1, param2, param3, evt));

function onDragStart(param1, param2, param3, evt) {

 //some action...

}

또한 다음을 시도하십시오 (IE8 + Chrome. FF는 모르겠습니다).

function addEvent(obj, type, fn) {
    eval('obj.on'+type+'=fn');
}

function removeEvent(obj, type) {
    eval('obj.on'+type+'=null');
}

// Use :

function someFunction (someArg) {alert(someArg);}

var object=document.getElementById('somObject_id') ;
var someArg="Hi there !";
var func=function(){someFunction (someArg)};

// mouseover is inactive
addEvent (object, 'mouseover', func);
// mouseover is now active
addEvent (object, 'mouseover');
// mouseover is inactive

오타가 없기를 바랍니다 :-)

요소를 찾고 리스터를 추가하기 위해 루프에서 사용 하면서이 문제가 발생했습니다. 루프에서 사용하면 완벽하게 작동합니다.

for (var i = 0; i < states_array.length; i++) {
     var link = document.getElementById('apply_'+states_array[i].state_id);
     link.my_id = i;
     link.addEventListener('click', function(e) {   
        alert(e.target.my_id);        
        some_function(states_array[e.target.my_id].css_url);
     });
}

2019 년에는 많은 버그 변경이 있었으며 수정 버그없이 가장 좋은 대답은 더 이상 작동하지 않습니다.

작동 코드를 공유하십시오.

위의 모든 대답에서 영감을 얻었습니다.

 button_element = document.getElementById('your-button')

 button_element.setAttribute('your-parameter-name',your-parameter-value);

 button_element.addEventListener('click', your_function);


 function your_function(event)
   {
      //when click print the parameter value 
      console.log(event.currentTarget.attributes.your-parameter-name.value;)
   }

모든 함수에는 특별한 변수가 있습니다 : arguments . 매개 변수를 익명 매개 변수로 전달하고 arguments 변수를 통해 순서대로 액세스 할 수 있습니다 .

예:

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

    var EV = {
        ev: '',
        fn: '',
        elem: '',
        add: function () {
            this.elem.addEventListener(this.ev, this.fn, false);
        }
    };

    function cons() {
        console.log('some what');
    }

    EV.ev = 'click';
    EV.fn = cons;
    EV.elem = document.getElementById('body');
    EV.add();

//If you want to add one more listener for load event then simply add this two lines of code:

    EV.ev = 'load';
    EV.add();

다음 접근 방식이 저에게 효과적이었습니다. 여기 에서 수정했습니다 .

function callback(theVar) {
  return function() {
    theVar();
  }
}

function some_other_function() {
  document.body.innerHTML += "made it.";
}

var someVar = some_other_function;
document.getElementById('button').addEventListener('click', callback(someVar));

<!DOCTYPE html>
<html>
  <body>
    <button type="button" id="button">Click Me!</button>
  </body>
</html>

다음 대답은 정확하지만 yuicompressor를 사용하여 js 파일을 압축했다고 가정하면 IE8에서 아래 코드가 작동하지 않습니다. (실제로 대부분의 미국 사람들은 IE8을 사용합니다)

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

따라서 위의 문제를 다음과 같이 해결할 수 있으며 모든 브라우저에서 제대로 작동합니다.

var someVar, eventListnerFunc;
someVar = some_other_function();
eventListnerFunc = some_function(someVar);
someObj.addEventListener("click", eventListnerFunc, false);

희망은 프로덕션 환경에서 js 파일을 압축하는 일부 사용자에게 유용 할 것입니다.

행운을 빕니다!!

다음 코드는 나를 위해 잘 작동했습니다 (firefox).

for (var i=0; i<3; i++) {
   element = new ...   // create your element
   element.counter = i;
   element.addEventListener('click', function(e){
        console.log(this.counter);
        ...            // another code with this element
   }, false);
}

산출:

0
1
2

당신이 필요합니다 :

newElem.addEventListener('click', {
    handleEvent: function (event) {
        clickImg(parameter);
    }
});

아마도 최적은 아니지만 슈퍼 js에 정통하지 않은 사람들에게는 충분할 것입니다. addEventListener를 호출하는 함수를 자체 함수에 넣습니다. 이렇게하면 전달 된 함수 값이 자체 범위를 유지하고 원하는만큼 해당 함수를 반복 할 수 있습니다.

예 이미지와 파일 이름의 미리보기를 캡처하고 렌더링하는 데 필요한 파일 읽기 작업을 수행했습니다. 다중 파일 업로드 유형을 사용할 때 비동기 문제를 피하는 데 시간이 걸렸습니다. 다른 파일을 업로드하더라도 실수로 모든 렌더에서 동일한 '이름'을 볼 수 있습니다.

원래 모든 readFile () 함수는 readFiles () 함수 내에있었습니다. 이로 인해 비동기 범위 지정 문제가 발생했습니다.

    function readFiles(input) {
      if (input.files) {
        for(i=0;i<input.files.length;i++) {

          var filename = input.files[i].name;

          if ( /\.(jpe?g|jpg|png|gif|svg|bmp)$/i.test(filename) ) {
            readFile(input.files[i],filename);
          }
       }
      }
    } //end readFiles



    function readFile(file,filename) {
            var reader = new FileReader();

            reader.addEventListener("load", function() { alert(filename);}, false);

            reader.readAsDataURL(file);

    } //end readFile

그냥 추가하고 싶습니다. 누구나 체크 박스를 이벤트 리스너에 업데이트하는 기능을 추가하는 경우 체크 박스를 업데이트하는 event.target대신 사용해야 합니다 this.

나는 매우 단순한 접근 방식을 가지고 있습니다. 이것은 다른 사람들에게 도움이 될 수 있습니다. 그것은 ... 같은 함수에 여러 요소 / 변수가 할당되어 있고 참조를 전달하려는 경우 가장 간단한 해결책은 ...

function Name()
{

this.methodName = "Value"

}

그게 다야. 그것은 나를 위해 일했다. 너무 간단합니다.

바인드를 사용하는 것만 큼 우아하지는 않지만 다른 대안은 루프의 이벤트에 유효합니다.

for (var key in catalog){
    document.getElementById(key).my_id = key
    document.getElementById(key).addEventListener('click', function(e) {
        editorContent.loadCatalogEntry(e.srcElement.my_id)
    }, false);
}

Google 크롬 확장 프로그램에 대해 테스트되었으며 다른 브라우저에서 e.srcElement를 e.source로 바꿔야 할 수도 있습니다.

Imatoria가 게시 한 의견을 사용 하여이 솔루션을 찾았 지만 평판이 충분하지 않아 유용하다고 표시 할 수 없습니다.

이 솔루션은보기에 좋습니다.

var some_other_function = someVar => function() {
}

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

또는 유가 증권을 묶는 것도 좋습니다