Bagaimana cara menyampaikan argumen ke fungsi pendengar addEventListener?

Situasinya agak seperti-

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

Masalahnya adalah bahwa nilai someVartidak terlihat di dalam fungsi pendengar addEventListener, di mana ia mungkin diperlakukan sebagai variabel baru.

Sama sekali tidak ada yang salah dengan kode yang Anda tulis. Keduanya some_functiondan someVarharus dapat diakses, jika tersedia dalam konteks di mana anonim

function() { some_function(someVar); } 

telah dibuat.

Periksa apakah lansiran memberi Anda nilai yang Anda cari, pastikan lansiran itu dapat diakses dalam lingkup fungsi anonim (kecuali jika Anda memiliki lebih banyak kode yang beroperasi pada someVarvariabel yang sama di samping panggilan ke addEventListener)

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

Mengapa tidak mendapatkan argumen dari atribut target acara?

Contoh:

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 adalah bahasa berorientasi prototipe, ingat!

Pertanyaan ini sudah tua tapi saya pikir saya akan menawarkan alternatif menggunakan ESB's .bind () - untuk anak cucu. :)

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

Perlu diketahui bahwa Anda perlu mengatur fungsi pendengar Anda dengan param pertama sebagai argumen yang Anda lewati untuk mengikat (fungsi Anda yang lain) dan param kedua sekarang adalah acara (bukan yang pertama, seperti seharusnya) .

Anda bisa mengikat semua argumen yang diperlukan dengan 'bind':

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

Dengan cara ini Anda akan selalu mendapatkan event, arg1dan hal-hal lain diteruskan ke myPrettyHandler.

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

Pertanyaan yang cukup lama dan tetapi saya memiliki masalah yang sama hari ini. Solusi terbersih yang saya temukan adalah menggunakan konsep currying.

Kode untuk itu:

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

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

Dengan menamai fungsi curried, Anda dapat memanggil Object.removeEventListener untuk membatalkan registrasi eventListener di waktu eksekusi selanjutnya.

Anda bisa menambah dan menghapus eventlisteners dengan argumen dengan mendeklarasikan fungsi sebagai variabel.

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

newSrcadalah metode dengan myaudio sebagai parameter funcNameadalah variabel nama fungsi

Anda dapat menghapus pendengar dengan myaudio.removeEventListener('ended',func,false);

Anda dapat melewatkan somevar dengan nilai (bukan dengan referensi) melalui fitur javascript yang dikenal sebagai closure :

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

Atau Anda dapat menulis fungsi wrap umum seperti 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'

Ini wrapEventCallback(func,var1,var2)seperti:

func.bind(null, var1,var2)

someVarnilai harus dapat diakses hanya dalam some_function()konteks, bukan dari pendengar. Jika Anda ingin memilikinya dalam pendengar, Anda harus melakukan sesuatu seperti:

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

dan gunakan newVarsaja.

Cara lain adalah mengembalikan someVarnilai dari some_function()untuk menggunakannya lebih lanjut di pendengar (sebagai var lokal baru):

var someVar = some_function(someVar);

Inilah cara lain (Yang ini bekerja di dalam untuk loop):

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

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

false);

Function.prototype.bind () adalah cara untuk mengikat fungsi target ke lingkup tertentu dan secara opsional menentukan thisobjek di dalam fungsi target.

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

Atau untuk menangkap beberapa lingkup leksikal, misalnya dalam satu lingkaran:

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

Akhirnya, jika thisparameter tidak diperlukan dalam fungsi target:

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

Menggunakan

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

Dan jika Anda ingin memberikan nilai khusus ke fungsi anonim ini, maka cara termudah untuk melakukannya adalah

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

Bekerja dengan baik di proyek saya. Semoga ini bisa membantu

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

Ini adalah bagaimana saya melewati acara dengan benar.

Mengirim argumen ke fungsi callback eventListener membutuhkan pembuatan fungsi yang terisolasi dan meneruskan argumen ke fungsi yang terisolasi itu.

Inilah fungsi pembantu kecil yang bagus yang dapat Anda gunakan. Berdasarkan contoh "halo dunia" di atas.)

Satu hal yang juga dibutuhkan adalah mempertahankan referensi ke fungsi tersebut sehingga kita dapat menghapus pendengar dengan bersih.

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

Salah satu caranya adalah melakukan ini dengan fungsi luar :

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

Metode membungkus fungsi anonim dalam tanda kurung dan segera memanggilnya disebut IIFE (Ekspresi Fungsi yang Segera Diminta)

Anda dapat memeriksa contoh dengan dua parameter di 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));

Jika saya tidak salah menggunakan fungsi panggil bindsebenarnya menciptakan fungsi baru yang dikembalikan oleh bindmetode. Ini akan menyebabkan masalah Anda nanti atau jika Anda ingin menghapus pendengar acara, karena pada dasarnya seperti fungsi anonim:

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

Jadi ingatlah itu.

Jika Anda menggunakan ES6, Anda bisa melakukan hal yang sama seperti yang disarankan tetapi sedikit lebih bersih:

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

alternatif satu baris yang bagus

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

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

 //some action...

}

Coba juga ini (IE8 + Chrome. Saya tidak tahu untuk 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

Semoga tidak ada kesalahan ketik :-)

Saya terjebak dalam hal ini karena saya menggunakannya dalam satu lingkaran untuk menemukan elemen dan menambahkan listner ke dalamnya. Jika Anda menggunakannya dalam satu lingkaran, maka ini akan bekerja dengan sempurna

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

Pada 2019, banyak api berubah, jawaban terbaik tidak lagi berfungsi, tanpa memperbaiki bug.

bagikan beberapa kode kerja.

Terinspirasi oleh semua jawaban di atas.

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

Ada variabel khusus di dalam semua fungsi: argumen . Anda dapat melewatkan parameter Anda sebagai parameter anonim dan mengaksesnya (berdasarkan pesanan) melalui variabel argumen .

Contoh:

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

Pendekatan berikut bekerja dengan baik untuk saya. Dimodifikasi dari sini .

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>

Jawaban berikut ini benar tetapi kode di bawah ini tidak berfungsi di IE8 jika Anda mengompres file js menggunakan yuicompressor. (Bahkan, masih sebagian besar orang AS menggunakan IE8)

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

Jadi, kita dapat memperbaiki masalah di atas sebagai berikut dan berfungsi dengan baik di semua browser

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

Semoga bermanfaat bagi seseorang yang mengompres file js di lingkungan produksi.

Semoga berhasil!!

Kode berikut ini berfungsi dengan baik untuk saya (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);
}

Keluaran:

0
1
2

Anda membutuhkan:

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

Mungkin tidak optimal, tetapi cukup sederhana bagi mereka yang tidak paham js. Masukkan fungsi yang memanggil addEventListener ke dalam fungsinya sendiri. Dengan begitu nilai fungsi apa pun yang diteruskan ke dalamnya mempertahankan ruang lingkupnya sendiri dan Anda dapat mengulangi fungsi tersebut sebanyak yang Anda inginkan.

Contoh saya bekerja dengan membaca file karena saya perlu untuk menangkap dan membuat pratinjau gambar dan nama file. Butuh beberapa saat untuk menghindari masalah asinkron ketika menggunakan jenis unggah banyak file. Saya tidak sengaja akan melihat 'nama' yang sama pada semua render meskipun mengunggah file yang berbeda.

Awalnya, semua fungsi readFile () berada dalam fungsi readFiles (). Ini menyebabkan masalah pelingkupan asinkron.

    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

hanya ingin menambahkan. jika ada yang menambahkan fungsi yang memperbarui kotak centang ke pendengar acara, Anda harus menggunakan event.targetalih-alih thismemperbarui kotak centang.

Saya memiliki pendekatan yang sangat sederhana. Ini mungkin bekerja untuk orang lain karena itu membantu saya. Itu adalah ... Ketika Anda memiliki beberapa elemen / variabel yang ditugaskan fungsi yang sama dan Anda ingin memberikan referensi, solusi paling sederhana adalah ...

function Name()
{

this.methodName = "Value"

}

Itu dia. Ini berhasil untuk saya. Sangat sederhana.

Alternatif lain, mungkin tidak seanggun penggunaan bind, tetapi valid untuk acara dalam satu lingkaran

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

Ini telah diuji untuk ekstensi google chrome dan mungkin e.srcElement harus diganti oleh e.source di browser lain

Saya menemukan solusi ini menggunakan komentar yang diposting oleh Imatoria tetapi saya tidak dapat menandainya sebagai berguna karena saya tidak memiliki reputasi yang cukup: D

Solusi ini mungkin bagus untuk dicari

var some_other_function = someVar => function() {
}

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

atau bind bali juga akan baik