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

Question

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

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

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

Answer 1

Вам нужно:

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

Answer 2

Следующий ответ правильный, но приведенный ниже код не работает в IE8, если предположить, что вы сжали файл js с помощью yuicompressor. (На самом деле, большинство людей в США используют 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 в производственной среде.

Удачи !!

Answer 3

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

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 Chrome и, возможно, e.srcElement должен быть заменен на e.source в других браузерах

Я нашел это решение, используя комментарий от Imatoria , но я не могу пометить его как полезный, потому что у меня недостаточно репутации: D

Answer 4

Внутри всех функций есть специальная переменная: аргументы . Вы можете передавать свои параметры как анонимные параметры и обращаться к ним (по заказу) через переменную arguments .

Пример:

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

Answer 5

хорошая альтернатива в одну строку

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

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

 //some action...

}

Answer 6

Вероятно, не оптимально, но достаточно просто для тех, кто не супер смекалка. Поместите функцию, которая вызывает 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

Answer 7

Следующий код работал нормально для меня (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