Как передать аргументы функции прослушивателя addEventListener?

Question

Ситуация чем-то напоминает -

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

Проблема в том, что значение someVar не отображается внутри функции прослушивателя addEventListener, где оно, вероятно, рассматривается как новая переменная.

Answer 1

Почему бы просто не получить аргументы из целевого атрибута события?

Пример:

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

JavaScript - это ориентированный на прототип язык, помните!

Answer 2

Нет ничего плохого в написанном вами коде. И 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);

Answer 3

Этот вопрос старый, но я решил предложить альтернативу, использующую ES5 .bind () - для потомков. :)

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

Просто имейте в виду, что вам нужно настроить функцию слушателя с первым параметром в качестве аргумента, который вы передаете в bind (ваша другая функция), а второй параметр теперь является событием (вместо первого, как это было бы были).

Answer 4

Вы можете добавлять и удалять списки событий с аргументами, объявив функцию как переменную.

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

newSrc - метод с myaudio в качестве параметра funcName является переменной имени функции

Вы можете удалить слушателя с помощью myaudio.removeEventListener('ended',func,false);

Answer 5

Довольно старый вопрос, но у меня была такая же проблема сегодня. Самое чистое решение, которое я нашел, это использовать концепцию карри.

Код для этого:

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

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

Называя функцию curried, она позволяет вам вызывать Object.removeEventListener для отмены регистрации eventListener в более позднее время выполнения.

Answer 6

Вы можете просто связать все необходимые аргументы с помощью 'bind':

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

Таким образом, вы всегда будете получать event, arg1 и другие вещи, переданные myPrettyHandler.

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

Answer 7

Вы можете передать somevar по значению (не по ссылке) с помощью функции JavaScript, известной как closure :

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)

Answer 8

Вот еще один способ (этот работает внутри для циклов):

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

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

false);

Answer 9

Значение

someVar должно быть доступно только в контексте some_function(), а не из слушателя. Если вы хотите, чтобы это было внутри слушателя, вы должны сделать что-то вроде:

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

и используйте newVar вместо.

Другой способ - вернуть someVar значение из some_function() для дальнейшего использования в слушателе (как новый локальный var):

var someVar = some_function(someVar);

Answer 10

Использование

   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);

Отлично работает в моем проекте. Надеюсь, это поможет