Bagaimana Anda bisa mengatur pendengar acara ke kontrol dengan nama variabel string alih-alih nama argumen fungsi?

//working method
var elementValue = document.createElement("button");
elementValue.className = "locatorTrainButton";
elementValue.addEventListener('click', myFunctionName_OnClick);

//set event from variable name
var stringName = "myFunctionName_OnClick";
elementValue.addEventListener('click', *stringName??*);
1
Jaume 8 Januari 2021, 02:39

3 jawaban

Jawaban Terbaik

Selama fungsi Anda didefinisikan di tingkat atas maka Anda dapat melakukan seperti:

function test(){
  console.log('worked');
}
addEventListener('click', window['test']);
Just click the window!

Jika fungsi Anda bersarang maka Anda dapat menetapkannya ke jendela, pastikan panggilan Anda di bawah tugas saat menggunakan deklarasi variabel fungsi:

(()=>{
window.test = ()=>{
  console.log('worked');
}
})();
(()=>{
addEventListener('click', window['test']);
})();
Just click the window!
1
StackSlave 8 Januari 2021, 00:07

Anda tidak bisa, karena listener harus berupa objek atau fungsi

Dari MDN

addEventListener() bekerja dengan menambahkan fungsi atau objek yang mengimplementasikan EventListener ke daftar event listener untuk jenis peristiwa yang ditentukan pada EventTarget yang dipanggil.

Berikut sintaksnya:

target.addEventListener(type, listener [, options]);

target.addEventListener(type, listener [, useCapture]);

Dimana listener adalah:

Objek yang menerima notifikasi (objek yang mengimplementasikan antarmuka Event) saat terjadi peristiwa dengan tipe tertentu. Ini harus berupa objek yang mengimplementasikan antarmuka EventListener, atau fungsi JavaScript.

1
dippas 7 Januari 2021, 23:49

Anda tidak dapat menggunakan nama string sebagai referensi fungsi dalam panggilan balik. Namun, menggunakan fungsi anonim dengan eval() dapat berfungsi, meskipun tidak disarankan.

Itu karena secara teknis berbicara Anda dapat menggunakan eval() untuk memanggil fungsi dengan namanya dan kemudian menggunakan <functionName>.apply(null, arguments) untuk memanggilnya dengan argumen yang sama yang diterima panggilan balik.

Namun, saya tidak akan merekomendasikan solusi ini karena eval() secara umum tidak disukai karena menimbulkan risiko keamanan. Apakah ada alasan mengapa Anda ingin menggunakan nama fungsi dinamis?

function myFunctionName_OnClick(e) {
  console.log('clicked');
  
  // Verify that event is passed correctly
  console.log(e.target);
}

var elementValue = document.createElement("button");
elementValue.innerText = 'Click me!';

var stringName = "myFunctionName_OnClick";
elementValue.addEventListener('click', function() {
  eval(stringName + '.apply(null, arguments)');
});

document.body.appendChild(elementValue);
1
Terry 8 Januari 2021, 00:01