Может ли второй аргумент в addEventListener быть сопоставлен со строкой?

#javascript #addeventlistener

#javascript #addeventlistener

Вопрос:

AFAIK, второй аргумент в addEventListener — это точное имя функции, которая вызывается после того, как произойдет событие. Я хочу, чтобы второй аргумент в addEventListener был сопоставлен со строкой, а затем эта функция должна быть вызвана. Нравится:

 var k =0;

for(var i=0;i<arr.length;i  ){
    var val=arr[i];
    var link=document.createElement('a');

    link.id='name' k  ;
    link.innerHTML="Name :   "  val.name "<br/><br/>";

    link.setAttribute('href','#');

    link.addEventListener('click',link.id);   //I want link.id should be the string which is either name0 or name1 or name2 ....
}

function name0(){

}

function name1(){

}

function name2(){

}
  

Ответ №1:

Я понял, что вы хотите динамически добавлять события щелчка и их собственные обработчики к другому элементу. Вы можете сделать это, используя его метод:

 var k =0;

var obj = {
    name0: function (){

    },
    name1: function(){

    },
    name2: function(){

    }
}

for(var i=0;i<arr.length;i  ){
    var val=arr[i];
    var link=document.createElement('a');

    link.id='name' k  ;
    link.innerHTML="Name :   "  val.name "<br/><br/>";

    link.setAttribute('href','#');

    //link.id could be name0, name1 ... and func could be obj[name0], obj[name1], obj[name2].....
    link.addEventListener('click',obj[link.id]);   //I want <br/> link.id should be the string which is either name0 or name1 or name2 ....
}
  

Комментарии:

1. какой-либо из ответов решил вашу проблему. Если да, то, пожалуйста, примите это, это может помочь другому пользователю. Если нет, то, пожалуйста, добавьте комментарий.

Ответ №2:

Самый простой способ сделать это — обернуть прослушиватели событий в объект следующим образом:

 var arr = [{name: "zero"}, {name: "one"}];
var listeners = {
    name0: function() {
        alert("Name 0")
    },
    name1: function() {
        alert("Name 1")
    }
}
var k = 0;

for(var i=0; i < arr.length; i  ){
    var val = arr[i];
    var link = document.createElement('a');

    link.id = 'name'   k  ;
    link.innerHTML="Name: "   val.name   "<br/><br/>";
    link.setAttribute('href','#');
    link.addEventListener('click', listeners[link.id]);

    document.body.appendChild(link);
}
  

Скрипка доступна здесь.